jQuery -一个复选框不选中所有，但切换时会记住原始状态。
jQuery -一个复选框不选中所有，但切换时会记住原始状态。
提问于 2019-11-20 03:26:18
当选中#checkall时，代码段中的代码将禁用所有选中状态，但当再次取消选中#checkall时，我希望恢复到每个复选框的原始checked状态。
所需的UX是模拟关闭通知。
$(document).ready(function() {
$('#checkall').click(function() {
var checked = $(this).prop('checked');
$('#checkboxes').find('input:checkbox').prop('checked', false);
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkall" />
<label for="checkall">Disable</label>
<br/>
<br/>
<div id="checkboxes">
<input type="checkbox" checked/>
<input type="checkbox" />
<input type="checkbox" checked/>
<input type="checkbox" checked/>
<input type="checkbox" />
<input type="checkbox" checked/>
<input type="checkbox" />
</div>
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-11-20 03:43:14
另一种方法。
通常使用".on('change'，.“)更好而不是直接绑定到“单击”事件。
$(document).ready(function () {
$('#checkall').on("change", function () {
if (!$(this).prop('checked')) {
$('#checkboxes input[type=checkbox]').each(function (index, elem) {
var input = $(elem);
input.prop('checked', input.data('was-checked'));
});
}
else {
$('#checkboxes input[type=checkbox]').each(function (index, elem) {
var input = $(elem);
input.data('was-checked',input.prop('checked'));
input.prop('checked', false);
});
}
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkall" />
<label for="checkall">Disable</label>
<br/>
<br/>
<div id="checkboxes">
<input type="checkbox" checked/>
<input type="checkbox" />
<input type="checkbox" checked/>
<input type="checkbox" checked/>
<input type="checkbox" />
<input type="checkbox" checked/>
<input type="checkbox" />
</div>
Stack Overflow用户
发布于 2019-11-20 03:32:11
- 为选中的复选框添加数据属性，然后使用数据属性选择原始复选框
$(document).ready(function() {
$('#checkall').click(function() {
var checked = $(this).prop('checked');
$('#checkboxes').find('input:checkbox').prop('checked', false);
$('#checkboxes').find('input:checkbox[data-checked="checked"]').prop('checked', !checked);
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkall" />
<label for="checkall">Disable</label>
<br/>
<br/>
<div id="checkboxes">
<input type="checkbox" data-checked="checked" checked/>
<input type="checkbox" />
<input type="checkbox" data-checked="checked" checked/>
<input type="checkbox" data-checked="checked" checked/>
<input type="checkbox" />
<input type="checkbox" data-checked="checked" checked/>
<input type="checkbox" />
</div>
Stack Overflow用户
发布于 2019-11-20 03:57:04
原始的选中状态存储在.attr中(“选中”)：
$('#checkboxes').find('input:checkbox').each(function(x) {
$(this).prop('checked', $(this).attr('checked') == 'checked' ? true : false)
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58946172
复制相关文章
相似问题
腾讯云开发者
