选中后选中所有其他复选框
Check all other checkboxes when one is checked
我有一个表单和一组复选框。(这些复选框是动态创建的,但我认为这对这个问题并不重要)。生成它们的代码如下所示(表单的一部分):
<div id="ScrollCB">
<input type="checkbox" name="ALL" value="checked" checked="checked">
All (if nothing selected, this is default) <br>
<c:forEach items="${serviceList}" var="service">
<input type="checkbox" name="${service}" value="checked"> ${service} <br>
</c:forEach>
</div>
我想做的是控制是否选中标有"ALL"的复选框,如果是 - 选中所有其他复选框(如果未选中,则取消选中所有复选框)。
我尝试像这样用javascript执行此操作(找到了一些教程),但它不起作用(而且我是javascript的真正新手,难怪):
<script type="text/javascript">
$ui.find('#ScrollCB').find('label[for="ALL"]').prev().bind('click',function(){
$(this).parent().siblings().find(':checkbox').attr('checked',this.checked).attr('disabled',this.checked);
}); });
</script>
你能告诉我一些简单的方法如何让它工作吗?多谢!
演示
updated_demo
.HTML:
<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>
.JS:
$('.selectall').click(function() {
if ($(this).is(':checked')) {
$('div input').attr('checked', true);
} else {
$('div input').attr('checked', false);
}
});
HTML:
<form>
<label>
<input type="checkbox" id="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>
</form>
.JS:
$('#selectall').click(function() {
$(this.form.elements).filter(':checkbox').prop('checked', this.checked);
});
http://jsfiddle.net/wDnAd/1/
多亏了@Ashish,如果您手动勾选所有子复选框,我稍微扩展了它以允许自动选中或取消选中"master"复选框。
小提琴
.HTML
<label><input type="checkbox" name="sample" class="selectall"/>Select all</label>
<div id="checkboxlist">
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox1</label><br/>
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox2</label><br />
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox3</label><br />
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox4</label><br />
</div>
脚本
$('.selectall').click(function() {
if ($(this).is(':checked')) {
$('input:checkbox').prop('checked', true);
} else {
$('input:checkbox').prop('checked', false);
}
});
现在添加它来管理主复选框...
$("input[type='checkbox'].justone").change(function(){
var a = $("input[type='checkbox'].justone");
if(a.length == a.filter(":checked").length){
$('.selectall').prop('checked', true);
}
else {
$('.selectall').prop('checked', false);
}
});
根据您的复选框组添加额外的脚本:
<script language="JavaScript">
function selectAll(source) {
checkboxes = document.getElementsByName('colors[]');
for(var i in checkboxes)
checkboxes[i].checked = source.checked;
}
</script>
网页代码:
<input type="checkbox" id="selectall" onClick="selectAll(this,'color')" />Select All
<ul>
<li><input type="checkbox" name="colors[]" value="red" />Red</li>
<li><input type="checkbox" name="colors[]" value="blue" />Blue</li>
<li><input type="checkbox" name="colors[]" value="green" />Green</li>
<li><input type="checkbox" name="colors[]" value="black" />Black</li>
</ul>
我希望对您有所帮助,我知道这是一个迟到的答案,但如果有人再来这里
$("#all").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
仅在 JavaScript 中具有自动检查/取消选中 master 功能,当任何子子项被选中/取消选中时。
function FnCheckAll()
{
var ChildChkBoxes = document.getElementsByName("ChildCheckBox");
for (i = 0; i < ChildChkBoxes.length; i++)
{
ChildChkBoxes[i].checked = document.forms[0].CheckAll.checked;
}
}
function FnCheckChild()
{
if (document.forms[0].ChildCheckBox.length > document.querySelectorAll('input[name="ChildCheckBox"]:checked').length)
document.forms[0].CheckAll.checked = false;
else
document.forms[0].CheckAll.checked = true;
}
主复选框:
<input type="checkbox" name="CheckAll" id="CheckAll" onchange="FnCheckAll()" />
子复选框:
<input type="checkbox" name="ChildCheckBox" id="ChildCheckBox" onchange="FnCheckChild()" value="@employee.Id" />```
你可以像这样使用 jQuery:
jQuery
$('[name="ALL"]:checkbox').change(function () {
if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
else $('input:checkbox').removeAttr('checked');
});
小提琴。
var selectedIds = [];
function toggle(source) {
checkboxes = document.getElementsByName('ALL');
for ( var i in checkboxes)
checkboxes[i].checked = source.checked;
}
function addSelects() {
var ids = document.getElementsByName('ALL');
for ( var i = 0; i < ids.length; i++) {
if (ids[i].checked == true) {
selectedIds.push(ids[i].value);
}
}
}
在 HTML 中:
主复选框<input type="checkbox" onClick="toggle(this);">
其他复选框<input type="checkbox" name="ALL">
您可以使用 :first 选择器查找第一个输入并将更改事件绑定到该输入。在下面的示例中,我使用第一个输入的 :checked 状态来定义其同级状态。我还建议将代码放在 JQuery 就绪事件中。
$('document').ready(function(){
$('#ScrollCB input:first').bind('change', function() {
var first = $(this);
first.siblings().attr('checked', first.is(':checked'));
});
});
我不确定为什么在复选框上有名称时使用标签。使用它作为选择器。另外,您的代码在 HTML 标记中没有标签,因此它不会找到任何内容。
这是基本思想
$(document).on("click",'[name="ALL"]',function() {
$(this).siblings().prop("checked",this.checked);
});
如果还有其他元素是兄弟姐妹,那么您将过滤兄弟姐妹
$(document).on("click",'[name="ALL"]',function() {
$(this).siblings(":checkbox").prop("checked",this.checked);
});
js小提琴
- 选中一个复选框后,使用html.checkbox自动禁用其他复选框
- 当选中一个复选框时,表单中的所有其他复选框都必须禁用-不工作
- 具有延迟的多个复选框选择以检查其他复选框更改
- Javascript错误,根据其他复选框的结果更新复选框/按钮
- 如果选中了其他复选框,则取消选中复选框
- 选中后选中所有其他复选框
- 取消选中复选框将取消选中表中的其他复选框
- jQuery - 选中所有/取消选中所有复选框 - 然后取消选中(或选中)其他复选框
- Jquery如果选中某个复选框,则禁用其他复选框
- 单击具有类似类的复选框时,禁用其他复选框
- Javascript/JQuery设置复选框的值,同时禁用其他复选框
- jQuery-选中CHECK ALL时,取消选中其他复选框
- 复选框,用于选中其他复选框
- 如何在单击一个复选框时灰显(禁用)所有其他复选框
- 如何清除复选框当选中其他复选框时?使用java脚本
- 将第一个复选框设置为选中,其他复选框从客户端的复选框列表中禁用
- 选中最多三个复选框并禁用其他复选框
- 如何在选中最后一个值时选择其他复选框
- JavaScript / JQuery:只启用一些复选框,禁用其他复选框
- 复选框,选择(或取消选择)其组内的所有其他复选框