Change link location based on selection box

Question

I have a file manager that I want to try and encourage users to download. I saw that sites do something similar, but don’t know what his name is to try to find a similar entry.

It looks like what I want. If "Use Manager" is checked, it will give them a different URL if it is not checked.

Hope this makes sense.

thanks

Answer 1

What would you like to do is to process the click event on your checkbox and according to it the value (checked or not checked), change the href property of the "Download now" link.

 $( "#your_checkbox" ).on( "click", function(){ var link = "http://some_link.com"; // default link for unchecked if ( $(this).is( ":checked" ) ){ link = "http://some_other_link.com"; // modified link for checked } $( "#your_download_btn" ).attr( "href", link ); // setting the href }); 

Here is a simple demo .

Answer 2

Normal JavaScript:

 // Get DOM objects ready var checkbox = document.querySelector('input[type="checkbox"]'), downloadButton = document.querySelector('a#download'); // Set up function to change URL function chooseUrl() { var url = checkbox.checked ? 'http://example.com/default_download' : 'http://example.com/secondary_download'; downloadButton.setAttribute('href', url); } // Change URL on checkbox value change checkbox.addEventListener('change', chooseUrl); // Run chooseUrl once to set initial value chooseUrl(); 

JSFiddle Demo

---

JavaScript + jQuery:

 // Get jQuery-wrapped DOM objects ready var checkbox = $('input[type="checkbox"]'), downloadButton = $('a#download'); // Set up function to change URL function chooseUrl() { var url = checkbox.is(':checked') ? 'http://example.com/default_download' : 'http://example.com/secondary_download'; downloadButton.attr('href', url); } // Change URL on checkbox value change checkbox.on('change', chooseUrl); // Run chooseUrl once to set initial value chooseUrl(); 

JSFiddle Demo

Answer 3

Here is a simple jQuery example for what you are trying to do: http://jsfiddle.net/9g6Wn/2/

 var btn = $('#btn1'); var chk = $('#chk1'); btn.click(function () { if (chk.is(':checked') == true) { // if the checkbox is checked location.assign('http://en.wikipedia.org/wiki/Apple_Inc'); } else { location.assign('http://en.wikipedia.org/wiki/Apple'); } }); 

Answer 4

JQuery has a .is() function that you can use; it checks if the state is active. For example, for anchor tags ( <a> ), you can change :hover your :hover state. Similarly, for <input type='checkbox' /> ( <input type='checkbox' /> ) you can check the status :checked .

Since href is an attribute of the <a> tag, you can use

  $("#yourButtonThing").attr("href","newlink"); 

to change the link.

Here's jfiddle: http://jsfiddle.net/3yYWT/