Javascript 如何使用jQuery选中所有复选框？

我不是jQuery专家，但我已经尝试为我的应用程序创建一个小脚本。我想勾选所有复选框，但它无法正常工作

首先我尝试使用

attr

，然后我尝试使用

prop

，但我做错了什么

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

我先试了一下：

$("#checkAll").change(function(){

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').attr('checked','checked');
  } else {
      $('input:checkbox').removeAttr('checked');
  }       
});

但这不起作用

下一步：这比上面的代码工作得更好

$("#checkAll").change(function(){

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').prop('checked',true);
  } else {
      $('input:checkbox').prop('checked', false);
  }       
});

这两个例子都不起作用

jsiddle:

您需要使用设置checked属性

$("#checkAll").click(function(){
    $('input:checkbox').not(this).prop('checked', this.checked);
});

---

演示：

只需使用

checkAll

的

checked

属性，并对checked属性使用而不是attr

$("#checkAll").click(function(){
    $('input:checkbox').not(this).prop('checked', this.checked);
});

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

从jQuery1.6开始，.attr（）方法返回未定义的属性 这还没有确定。检索和更改DOM属性，如 表单元素的选中、选中或禁用状态使用 .prop（）方法

您对复选框具有相同的id，并且它应该是唯一的。您最好使用一些带有依赖复选框的类，这样它就不会包含您不想要的复选框。As

$（'input:checkbox'）

将选中页面上的所有复选框。如果您的页面扩展了新复选框，则它们也将被选中/取消选中。这可能不是预期的行为

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

---

您可以使用以下简单代码：

function checkDelBoxes(pForm, boxName, parent)
{
    for (i = 0; i < pForm.elements.length; i++)
        if (pForm.elements[i].name == boxName)
            pForm.elements[i].checked = parent;
}

函数复选框（pForm、boxName、parent）
$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

{
对于（i=0；i

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

使用示例：

<a href="javascript:;" onclick="javascript:checkDelBoxes($(this).closest('form').get(0), 'CheckBox[]', true);return false;"> Select All
</a>
<a href="javascript:;" onclick="javascript:checkDelBoxes($(this).closest('form').get(0), 'CheckBox[]', false);return false;"> Unselect All
</a>

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

这里有一个完整的解决方案

$(document).ready(function() {
    $("#checkedAll").change(function() {
        if (this.checked) {
            $(".checkSingle").each(function() {
                this.checked=true;
            });
        } else {
            $(".checkSingle").each(function() {
                this.checked=false;
            });
        }
    });

    $(".checkSingle").click(function () {
        if ($(this).is(":checked")) {
            var isAllChecked = 0;

            $(".checkSingle").each(function() {
                if (!this.checked)
                    isAllChecked = 1;
            });

            if (isAllChecked == 0) {
                $("#checkedAll").prop("checked", true);
            }     
        }
        else {
            $("#checkedAll").prop("checked", false);
        }
    });
});

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

Html应为：

选中三个复选框上的单个复选框将被选中和取消选中

<input type="checkbox" name="checkedAll" id="checkedAll" />

<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

希望这对某人有帮助，就像对我一样

JS小提琴

请将上面的行改为

if(isAllChecked == 0)
{ 
    $("#checkedAll").prop("checked", true); 
}   

在SSR的答案和它的工作原理中，谢谢你，为什么不试试这个（在第二行的“form”#中，你需要放置html表单的正确选择器）：

您的html应该如下所示：

<form id="myForm">
      <span class="checkAll">checkAll</span>
      <span class="uncheckAll">uncheckAll</span>
      <input type="checkbox" class="checkSingle"></input>
      ....
</form>

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

检查所有
取消勾选
....

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

我希望这会有所帮助。

触发单击

$("#checkAll").click(function(){
    $('input:checkbox').click();
});

或

或

函数chek_al__indi（id）
$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

{
var k=id；
var cnt_descriptiv_indicatr=eval（$（'cnt_descriptiv_indicatr'）.val（）；
var std_cnt=10；
如果（$（'#'+k）.is（“：checked”））
{
对于（var i=1；ihtml:

通常，如果至少有一个从属复选框未选中，您还希望主复选框未选中；如果选中了所有从属复选框，则希望主复选框未选中：

/**
 * Checks and unchecks checkbox-group with a master checkbox and slave checkboxes
 * @param masterId is the id of master checkbox
 * @param slaveName is the name of slave checkboxes
 */
function checkAll(masterId, slaveName) {
    $master = $('#' + masterId);
    $slave = $('input:checkbox[name=' + slaveName + ']');

    $master.click(function(){
        $slave.prop('checked', $(this).prop('checked'));
        $slave.trigger('change');
    });

    $slave.change(function() {
        if ($master.is(':checked') && $slave.not(':checked').length > 0) {
            $master.prop('checked', false);
        } else if ($master.not(':checked') && $slave.not(':checked').length == 0) {
        $master.prop('checked', 'checked');
    }
    });
}


如果您想启用任何控件（例如，
删除所有
按钮或
添加某些内容
按钮），当至少选中一个复选框时，如果不选中复选框则禁用：

/**
 * Checks and unchecks checkbox-group with a master checkbox and slave checkboxes,
 * enables or disables a control when a checkbox is checked
 * @param masterId is the id of master checkbox
 * @param slaveName is the name of slave checkboxes
 */
function checkAllAndSwitchControl(masterId, slaveName, controlId) {
    $master = $('#' + masterId);
    $slave = $('input:checkbox[name=' + slaveName + ']');

    $master.click(function(){
        $slave.prop('checked', $(this).prop('checked'));
        $slave.trigger('change');
    });

    $slave.change(function() {
        switchControl(controlId, $slave.filter(':checked').length > 0);
        if ($master.is(':checked') && $slave.not(':checked').length > 0) {
            $master.prop('checked', false);
        } else if ($master.not(':checked') && $slave.not(':checked').length == 0) {
        $master.prop('checked', 'checked');
    }
    });
}

/**
 * Enables or disables a control
 * @param controlId is the control-id
 * @param enable is true, if control must be enabled, or false if not
 */
function switchControl(controlId, enable) {
    var $control = $('#' + controlId);
    if (enable) {
        $control.removeProp('disabled');
    } else {
        $control.prop('disabled', 'disabled');
    }
}

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

HTML

<HTML>
<HEAD>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
    <H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
    <th><input type="checkbox" id="selectall"/></th>
    <th>Cell phone</th>
    <th>Rating</th>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
    <td>BlackBerry Bold 9650</td>
    <td>2/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
    <td>Samsung Galaxy</td>
    <td>3.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
    <td>Droid X</td>
    <td>4.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
    <td>HTC Desire</td>
    <td>3/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
    <td>Apple iPhone 4</td>
    <td>5/5</td>
</tr>
</table>

</BODY>
</HTML>


$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

多个复选框选择/取消选择-演示
多个复选框选择/取消选择-演示
手机
评级
黑莓黑体9650
2/5
三星银河
3.5/5
机器人X
4.5/5
HTC欲望
3/5
苹果iphone4
5/5

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

jQuery代码

<SCRIPT language="javascript">
$(function(){

    // add multiple select / deselect functionality
    $("#selectall").click(function () {
          $('.case').attr('checked', this.checked);
    });

    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").click(function(){

        if($(".case").length == $(".case:checked").length) {
            $("#selectall").attr("checked", "checked");
        } else {
            $("#selectall").removeAttr("checked");
        }

    });
});
</SCRIPT>


$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

$（函数（）{
//添加多个选择/取消选择功能
$（“#选择全部”）。单击（函数（）{
$（'.case'）.attr（'checked'，this.checked）；
});
//如果选中了所有复选框，请选中selectall复选框
//维切维萨呢
$（“.case”）。单击（函数（）{
if（$（“.case”）.length==$（“.case:已选中”）.length）{
$（“选择全部”）.attr（“选中”、“选中”）；
}否则{
$（“#selectall”）。删除属性（“选中”）；
}
});
});

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

查看演示


$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

$（函数（）{
//添加多个选择/取消选择功能
$（“#选择全部”）。单击（函数（）{
$（'.case'）.attr（'checked'，this.checked）；
});
//如果选中了所有复选框，请选中selectall复选框
//维切维萨呢
$（“.case”）。单击（函数（）{
if（$（“.case”）.length==$（“.case:已选中”）.length）{
$（“选择全部”）.attr（“选中”、“选中”）；
}否则{
$（“#selectall”）。删除属性（“选中”）；
}
});
});
多个复选框选择/取消选择-演示
多个复选框选择/取消选择-演示
手机
评级
黑莓黑体9650
2/5
三星银河
3.5/5
机器人X
4.5/5
HTC欲望
3/5
苹果iphone4
5/5
用于获取属性的值

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

/*----------------------------------------
 *  Check and uncheck checkbox which will global
 *  Params : chk_all_id=id of main checkbox which use for check all dependant, chk_child_pattern=start pattern of the remain checkboxes 
 *  Developer Guidline : For to implement this function Developer need to just add this line inside checkbox {{ class="check_all" dependant-prefix-id="PATTERN_WHATEVER_U_WANT" }}
 ----------------------------------------*/
function checkUncheckAll(chk_all_cls,chiled_patter_key){
    if($("."+chk_all_cls).prop('checked') == true){
        $('input:checkbox[id^="'+chiled_patter_key+'"]').prop('checked', 'checked');
    }else{
        $('input:checkbox[id^="'+chiled_patter_key+'"]').removeProp('checked', 'checked');
    }        
}

if($(".check_all").get(0)){
    var chiled_patter_key = $(".check_all").attr('dependant-prefix-id');

    $(".check_all").on('change',function(){        
        checkUncheckAll('check_all',chiled_patter_key);
    });

    /*------------------------------------------------------
     * this will remain checkbox checked if already checked before ajax call! :)
     ------------------------------------------------------*/
    $(document).ajaxComplete(function() {
        checkUncheckAll('check_all',chiled_patter_key);
    });
}

我知道这里发布了很多答案，但我想发布这篇文章是为了优化代码，我们可以在全球范围内使用它

我尽力了

$( "#checkAll" ).checkall({
    target: "input:checkbox"
});

我希望这会有帮助

一个复选框可以将它们全部规则化

对于仍然希望通过一个轻量级插件来控制复选框的人，我创建了一个

请随意查看上面的示例


对于这个问题示例，您需要做的是：

    <p id="checkAll">Check All</p>
<hr />
<input type="checkbox" class="checkItem">Item 1
<input type="checkbox" class="checkItem">Item 2
<input type="checkbox" class="checkItem">Item3