使用數據屬性中的值選中鏈接點擊復選框（是否可能發生更改沖突？）

Question

我有以下具有鏈接和復選框的jQuery代碼。

單擊編輯鏈接后，它將獲得鏈接上的data屬性，並相應地選中復選框。

我還需要功能來更改復選框的值（如果用戶選中或未選中該復選框）。 因此，在更改時，其值將修改為1或0。

問題

如果取消選中該復選框，則該值將變為預期的0，但是如果再次單擊該鏈接，則該復選框將保持未選中狀態。

如何復制

見jsFiddle

1. 點擊鏈接
2. 取消選中該復選框
3. 再次點擊鏈接

我期望根據if( changecheckboxvalto == 1 )條件檢查該復選框。

碼

$('body').on('click', '#edit', function() {

  // Get the change checkbox val

  changecheckboxvalto = $(this).attr('data-changecheckboxvalto');
  console.log('changecheckboxvalto = ' + changecheckboxvalto);

  if( changecheckboxvalto == 1 ) {

    $('#myinput').val(1).attr('checked', true);

  } else {

    $('#myinput').val(0).attr('checked', false);

  }

  // click checkbox makes chekbox value change to 1 or 0

  $('#myinput').change(function() {
    console.log('change happened');
    if( $(this).val() == 0 ) {
      $(this).val(1).attr('checked', true);
      console.log('change condition 1');
    } else {
      $(this).val(0).attr('checked', false);
      console.log('change condition 2');
    }
  });

});

Answer 1

好吧，就是這樣：

if( changecheckboxvalto == 1 ) {

    $('#myinput').val(1).attr('checked', true);

} else {

    $('#myinput').val(0).attr('checked', false);

}

當changecheckboxvalto == 1 ，它將值設置為1 。 否則，將其設置為0 。 .val(0)部分永遠不會激活，因為它始終是1 。 另外，該屬性在#edit上設置，但是您正在#myinput上#myinput進行更改。 設置為此：

if( changecheckboxvalto == 1 ) {

    $('#edit').attr('data-changecheckboxvalto', 0);
    $('#myinput').attr('checked', true);

} else {

    $('#edit').attr('data-changecheckboxvalto', 1);
    $('#myinput').attr('checked', false);

}

Answer 2

如果您希望鏈接僅以一種方式推送復選框，而不以另一種方式推送 （始終使它為true，或者始終使它為false），那么這里是一個解決方案：

// Get the link
var link = $('#edit');

// Get the checkbox
var checkbox = $('#myinput');


// Add an onclick to the link

link.on('click', function () {

    // Get the value of the link attribute 'data-changecheckboxvalto'
    var pushedValue = link.attr('data-changecheckboxvalto');

    // Change the attribute checked accordingly
    checkbox.prop('checked', pushedValue);
    // NB : for jQuery < 1.6, use "checkbox.attr('checked', pushedValue);"

});

純JS中也是如此

// Get the link
var link = document.querySelector('#edit');

// Get the checkbox
var checkbox = document.querySelector('#myinput');


// Add an onclick to the link

link.onclick = function () {

    // Get the value of changecheckboxvalto
    var pushedValue = link.dataset.changecheckboxvalto;

    // Change the value of the checkbox checked attribute
    checkbox.checked = pushedValue;

};

另一方面，如果您嘗試使鏈接和復選框“孿生”，則可以擺脫data-changecheckboxvalto並執行以下一項操作：

這是使用jQuery的解決方案

// Get the link
var link = $('#edit');

// Get the checkbox
var checkbox = $('#myinput');


// Add an onclick to the link

link.on('click', function () {

    // Get the value of the checkbox attribute 'checked'
    var checkboxState = checkbox.prop('checked');
    // NB : for jQuery < 1.6, use "checkbox.attr('checked');"

    // Inverse the value of the attribute checked
    checkbox.prop('checked', !checkboxState);
    // NB : for jQuery < 1.6, use "checkbox.attr('checked', !checkboxState);"

});

純JS中也是如此

// Get the link
var link = document.querySelector('#edit');

// Get the checkbox
var checkbox = document.querySelector('#myinput');


// Add an onclick to the link

link.onclick = function () {

    // Inverse the value of the attribute checked
    checkbox.checked = !checkbox.checked;

}

讓我知道 ：）

Answer 3

您必須使用'prop'功能。

更改$('#myinput').val(1).attr('checked', true); 到$('#myinput').val(1).prop('checked', true); 和$('#myinput').val(0).attr('checked', false); 到$('#myinput').val(0).prop('checked', false);