Установите флажок для щелчка по ссылке, используя значение из data-attribute (возможно при изменении clash?)

Question

У меня есть следующий код jQuery, который имеет ссылку и флажок.

При нажатии на ссылку редактирования он получает атрибут данных в ссылке и соответственно устанавливает флажок.

Мне также нужна функциональность для изменения значения флажка, если он отмечен или не отмечен пользователем. Таким образом, при изменении его значение изменяется на 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

Если вы хотите, чтобы ссылка выдвигала флажок только в одну сторону, а не в другую (всегда делайте это истинным или всегда ложным), то вот решение:

// 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 2

Вы должны использовать функцию '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);

Answer 3

Ну, это было бы так:

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. Установите на это:

if( changecheckboxvalto == 1 ) {

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

} else {

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

}