7

我有一个表格和一组复选框。（这些复选框是动态创建的，但我认为这对这个问题并不重要）。生成它们的代码如下所示（表单的一部分）：

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

你能告诉我一些简单的方法如何让它工作吗？非常感谢！

4

10 回答 10

14

演示

更新演示

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);
    }
});
于 2013-10-29T12:27:54.983 回答
4

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/

于 2014-02-12T02:46:57.493 回答
4

感谢@Ashish，如果您手动勾选所有子复选框，我已经稍微扩展了它以允许自动选中或取消选中“主”复选框。

小提琴

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);
    }
});
于 2017-03-29T00:41:11.550 回答
3

根据您的复选框组添加额外的脚本：

<script language="JavaScript">
function selectAll(source) {
    checkboxes = document.getElementsByName('colors[]');
    for(var i in checkboxes)
        checkboxes[i].checked = source.checked;
}
</script>

HTML 代码：

<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>
于 2014-03-26T12:07:20.780 回答
1

用这个我希望能帮助你我知道这是一个迟到的答案但是如果有人再来这里

$("#all").change(function () {
        $("input:checkbox").prop('checked', $(this).prop("checked"));
    });
于 2016-06-25T10:58:12.683 回答
1

仅在选中/取消选中任何子项时，在具有 master 的自动选中/取消选中功能的 JavaScript 中。

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" />```
于 2019-08-30T04:57:26.200 回答
0

您可以使用 :first 选择器查找第一个输入并将更改事件绑定到它。在下面的示例中，我使用第一个输入的 :checked 状态来定义它的兄弟姐妹的状态。我还建议将代码放在 JQuery 就绪事件中。

    $('document').ready(function(){   
        $('#ScrollCB input:first').bind('change', function() {
            var first = $(this);
            first.siblings().attr('checked', first.is(':checked'));
        });
    });
于 2013-10-29T12:58:36.953 回答
0 
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">

于 2013-10-29T12:27:31.077 回答
0

您可以像这样使用 jQuery：

jQuery

$('[name="ALL"]:checkbox').change(function () {
   if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
   else $('input:checkbox').removeAttr('checked');
});

一把小提琴。

于 2013-10-29T12:25:13.210 回答
0

我不确定当复选框上有名字时为什么要使用标签。使用它作为选择器。另外，您的代码在 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);
});

jsFiddle

于 2013-10-29T12:26:31.797 回答