选中链接上的复选框，单击“使用数据属性中的值”(可能发生更改冲突？)
我有下面的jQuery代码，它有一个链接和一个复选框。
单击编辑链接时，它将获取链接上的数据属性，并相应地选中复选框。
如果用户选中或未选中复选框，则还需要功能来更改复选框的值。因此，在更改时，它的值将被修改为1或0。
问题
如果取消选中该复选框，则该值将变为0，但如果再次单击该链接，则复选框将保持未选中状态。
如何复制
- 单击链接
- 取消选中复选框
- 再次单击链接
我期望根据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');
}
});
});回答 3
Stack Overflow用户
发布于 2018-11-04 15:46:50
好吧，就是这样：
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);
}Stack Overflow用户
发布于 2018-11-04 16:15:24
如果希望链接只以一种方式推送复选框，而不是按另一种方式(始终使其为真，或始终使其为假)，那么下面是一个解决方案：
// 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;
}(请告诉我:)
Stack Overflow用户
发布于 2018-11-04 16:25:51
你必须使用“道具”功能。
将$('#myinput').val(1).attr('checked', true);更改为$('#myinput').val(1).prop('checked', true);，$('#myinput').val(0).attr('checked', false);更改为$('#myinput').val(0).prop('checked', false);
https://stackoverflow.com/questions/53142402
复制相似问题
腾讯云开发者
