I have a file manager that i want to try and encourage users to download. I've seen sites do something similar but don't know what its called to try and search for a similar post.

This is like what i want. If the "Use Manager" is ticked it will give them a different URL to when it is un-ticked.

Hope this makes sense.

Thanks

I have a file manager that i want to try and encourage users to download. I've seen sites do something similar but don't know what its called to try and search for a similar post.

This is like what i want. If the "Use Manager" is ticked it will give them a different URL to when it is un-ticked.

Hope this makes sense.

Thanks

• javascript
• jquery
• html

4 Answers 4

What you would want to do is handle a click event on your checkbox and according to it's value (checked or unchecked), modify the href property of the "Download Now" link.

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

Here is a simple demo.

Plain 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./default_download' : 'http://example./secondary_download';

    downloadButton.setAttribute('href', url);
}

// Change URL on checkbox value change
checkbox.addEventListener('change', chooseUrl);

// Run chooseUrl once to set initial value
chooseUrl();

Demo on JSFiddle

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./default_download' : 'http://example./secondary_download';

    downloadButton.attr('href', url);
}

// Change URL on checkbox value change
checkbox.on('change', chooseUrl);

// Run chooseUrl once to set initial value
chooseUrl();

Demo on JSFiddle

Here's a simple jQuery example for exactly what your trying to do: http://jsfiddle/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/wiki/Apple_Inc');
    } else {
        location.assign('http://en.wikipedia/wiki/Apple');
    }
});

There's a .is() function in jQuery that you can use; it checks if a state is active. For example, for anchor tags (<a>), you can have :hover to change its hover state. Similarly, for check boxes (<input type='checkbox' />), you can check the :checked state.

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

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

to change the link.

Here's a jfiddle: http://jsfiddle/3yYWT/