如何取消选中复选框,即使列表中的一个复选框未选中
How to uncheck a checkbox even if one among the list is unchecked?
我正在尝试选中复选框(该复选框会选中列表中的所有其他复选框,即使列表中的一个复选框未选中,也会取消选中。现在只有第一个我的意思是检查列表中所有剩余复选框的一个复选框正在发生,反之亦然,我的意思是取消选中,即使列表中的一个未选中不起作用。我怎样才能做到这一点?
<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>
<div id="checkboxlist">
<label><input type="checkbox" name="sample"/>checkbox1</label><br/>
<label><input type="checkbox" name="sample"/>checkbox2</label><br />
<label><input type="checkbox" name="sample"/>checkbox3</label><br />
<label><input type="checkbox" name="sample"/>checkbox4</label><br />
</div>
小提琴。
我会这样做:
$('.selectall').on('change', function(e) {
var $inputs = $('#checkboxlist input[type=checkbox]');
if(e.originalEvent === undefined) {
var allChecked = true;
$inputs.each(function(){
allChecked = allChecked && this.checked;
});
this.checked = allChecked;
} else {
$inputs.prop('checked', this.checked);
}
});
$('#checkboxlist input[type=checkbox]').on('change', function(){
$('.selectall').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>
<div id="checkboxlist">
<label><input type="checkbox" name="sample"/>checkbox1</label><br/>
<label><input type="checkbox" name="sample"/>checkbox2</label><br />
<label><input type="checkbox" name="sample"/>checkbox3</label><br />
<label><input type="checkbox" name="sample"/>checkbox4</label><br />
</div>
编辑:根据A. Wolff的建议将e.isTrigger
换成e.originalEvent === undefined
,如下所述。
你可以像下面这样做。在 #checkboxlist
下为checkbox
添加另一个点击事件,如果未选中checkbox
,则取消选中.selectall
。
$('#checkboxlist input[type=checkbox]').click(function(){
if (!$(this).is(':checked')) {
$('.selectall').prop('checked', false);
}
});
演示
查看此演示.. 与验证
<input type="checkbox" id="anchor-from"/>main
<input type="checkbox" class="checkall" id="period-daily" disabled />CheckBox2
<input type="checkbox" class="checkall" id="period-weekly"disabled />CheckBox3
<input type="checkbox" class="checkall" id="period-weekly2"disabled />CheckBox3
<input type="checkbox" class="checkall" id="period-weekly3"disabled />CheckBox3
<input type="checkbox" class="checkall" id="period-weekly4"disabled />CheckBox3
Js
$("#anchor-from").change(function(){
if($('#anchor-from').is(':checked'))
{
$(".checkall").attr("disabled", false);
$(".checkall").prop("checked", true);
}
else
{
$(".checkall").attr("disabled", true);
$(".checkall").prop("checked", false);
}
});
$(".checkall").change(function(){
if($('.checkall').not(':checked'))
{
$(".checkall").attr("disabled", true);
$(".checkall").prop("checked", false);
$("#anchor-from").prop("checked", false);
}
});
$(document).ready(function () {
$('input[name=sample]').click(function() {
if ($(this).hasClass('selectall')) {
if ($(this).prop('checked') == true) {
$('#checkboxlist input[name=sample]').prop('checked', true);
}
else {
$('#checkboxlist input[name=sample]').prop('checked', false);
}
}
else {
if ($('#checkboxlist input[name=sample]:checked').length == $('#checkboxlist input[name=sample]').length) {
$('.selectall').prop('checked', true)
}
else {
$('.selectall').prop('checked', false)
}
}
});
});
相关文章:
- 复选框:一次只允许单击一个复选框
- jquery从2个json字符串构建一个复选框表单
- 聚合物铁形式验证至少选中一个复选框
- 我有多个复选框,并希望为其中 2 个制定规则,以便如果我选择 1 个,则无法选择另一个
- 如何从多个复选框中获取最后一个值
- 选中复选框的Jquery/Javascript问题使用输入框操作将行从一个表添加到另一个表
- 在单击一个或多个复选框的同时调用iframe
- 如何创建只允许用户在选中前一个复选框的情况下选择复选框的复选框验证
- 复选框一次选中一个不在gridview中工作
- 如果选中了以下复选框,请选中上一个复选框
- 复选框一次选中一个不起作用
- 如何创建一个新的<李>带有复选框或<a>在里面
- 在一组复选框中,一次只允许选择一个
- 如何通过jQuery选中所有复选框并在单击一个复选框时取消选择
- 如何发现至少有一个复选框被选中或没有使用javascript
- 在mvc4中选择另一个复选框时禁用复选框
- 导航到另一个页面后,复选框状态会更改
- Javascript选中一个表中的所有复选框,该表的行具有样式显示标记
- 在服务器上创建一个复选框,使用 javascript 处理函数
- 选择一个从 mysql 返回选中/未选中复选框的对象