根据选择框链接位置更改

Question

我有一个文件管理器，我想尝试并鼓励用户下载。我已经看到网站做了类似的事情，但不知道它要求尝试搜索类似的帖子。

这就像我想要的那样。如果＆＃34;使用管理器＆＃34;如果没有勾选，它会给它们一个不同的URL。

希望这是有道理的。

由于

Answer 1

您要做的是处理复选框上的点击事件并根据其值（选中或取消选中），修改“立即下载”链接的href属性。

$( "#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
});

这是simple demo。

Answer 2

普通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();

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.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();

Demo on JSFiddle

Answer 3

这是一个简单的jQuery示例，正是您尝试做的事情：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中的.is()函数;它检查状态是否有效。例如，对于锚标记（<a>），您可以让:hover更改其悬停状态。同样，对于复选框（<input type='checkbox' />），您可以检查:checked状态。

由于href是<a>标记的属性，因此您可以使用

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

更改链接。

这是一个小问题：http://jsfiddle.net/3yYWT/