Checkbox combinations to produce different results with jQuery

I'm currently working on a download form. My desire is to allow the user to modify their download via checkboxes ("would you like item X, Y, or Z included in your download? A combination of the three?" etc.)

Ideally these checkbox combinations will echo different, pre-existing download links.

So, checking X and Z gives the user a download for x_z.zip. Y and Z gives y_z.zip, so on and so forth. And, once again ideally, there will always be a fallback download link when no checkboxes are selected.

Would anyone know how I can achieve this with jQuery/Javascript?

Thanks.

Answers


Mixing pure JS with jQuery. Assuming that your checkboxes' IDs are x, y, z.

function OnDownloadSubmit() {
  var isX = $('#x').prop('checked');
  var isY = $('#y').prop('checked');
  var isZ = $('#z').prop('checked');
  if(!(isX || isY || isZ)) { // if none of the checkboxes is checked
    // TODO: handle this problem
  } else {
    var elemlist = [];
    if(isX) elemlist = elemlist.concat(['x']);
    if(isY) elemlist = elemlist.concat(['y']);
    if(isZ) elemlist = elemlist.concat(['z']);
    var filename = elemlist.join('_') + '.zip';
    // Downloading
    var link = document.createElement('a');
    link.href = filename;
    link.download = filename;
    document.getElementsByTagName('body')[0].appendChild(link); // won't be visible
    link.click();
  }
}

EDIT/EXPLANATION/EXTENSION/COMPLETION/POST-SCRIPTUM/WHATEVER

Assume the following layout (HTML):

<input type="checkbox" id="x"> File X <br />
<input type="checkbox" id="y"> File Y <br />
<input type="checkbox" id="z"> File Z <br />
<input type="button" value="Request files" id="request" onclick="OnDownloadSubmit()">

which defines the layout with 3 checkboxes x, y and z and a submit button, request. When request is pressed, the OnDownloadSubmit function is called.

Also suppose that in the place of TODO in the OnDownloadSubmit function we put this line (JS):

alert('Please select at least one file to download!');

so the user is properly warned.

We'll check x and z and trace the code.

var isX = $('#x').prop('checked'); // = true
var isY = $('#y').prop('checked'); // = false
var isZ = $('#z').prop('checked'); // = true

This pure JS will init 3 variables. They indicate if a checkbox is checked.

The expression !(isX || isY || isZ) stands for "if none of them is true". So if the user doesn't select a file, they will be alerted.

However, in our example, x and z is checked, so we get to the else block.

var elemlist = [];
if(isX) elemlist = elemlist.concat(['x']); // elemlist = ['x']
if(isY) elemlist = elemlist.concat(['y']); // doesn't get invoked
if(isZ) elemlist = elemlist.concat(['z']); // elemlist = ['x', 'z']
var filename = elemlist.join('_') + '.zip'; // filename = 'x_z.zip'

This JS will initialize an empty list elemlist and adds letters 'x', 'y', 'z' to the list if the corresponding checkbox is checked. The join('_') method will join all the elements with '_'. Then we add '.zip' to that and we have our file name!

var link = document.createElement('a');
link.href = filename;
link.download = filename;
document.getElementsByTagName('body')[0].appendChild(link);
link.click();

This part is a little bit tricky. The first 3 lines build up a link that will look like so:

<a href="x_z.zip" download="x_z.zip"></a>

then the fourth line will add the link to the document's body. The link will be invisible and not clickable, because it has no text in it.

The fifth line simulates a click of the link, which downloads your desired file! We're done!

POST-POST-SCRIPTUM

Please learn the JS and jQuery essentials and then put this question on the site, because the worst thing is using code and not understanding it.

Also, put some effort on research for your questions, do not only describe the problem.


Need Your Help

How to align an address to a void pointer?

c++ memory pointers

In an application, I have a problem like this.

UIWebview does not get cookies

iphone ios cookies uiwebview monotouch

My UIWebview is not saving cookies at all. It is stuck in cookieless mode and as a result, the webpage is putting the cookie information in the url instead.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.