CheckBoxList 选择 jQuery 中的所有选项答案

【问题标题】：CheckBoxList select all options in jQueryCheckBoxList 选择 jQuery 中的所有选项
【发布时间】：2010-01-27 01:11:55
【问题描述】：

我有一个 CheckBoxList，其中一个选项是“全部”。如果用户选中“全部”并且如果用户未选中“全部”，我想选择所有选项，包括全部，我想清除选择。如果他们选择“全部”以外的任何其他选项，则什么也不做。任何人都可以用 jQuery 帮助我做到这一点吗？我正在使用 jQuery 1.2.6

<table border="0" onclick="SelectMe(this);" id="one">
<tbody>
    <tr>
        <td>
            <input type="checkbox" checked="checked" name="one$0" id="one_0"/><label for="one_0">All</label>
        </td>
        <td>
            <input type="checkbox" name="two$1" id="two_1"/><label for="two_1">Option One</label>
        </td>
        <td>
            <input type="checkbox" name="three$2" id="three_2"/><label for="three_2">Option Two</label>
        </td>
        <td>
            <input type="checkbox" name="four$3" id="four_3"/><label for="four_3">Option Three</label>
        </td>
        <td>
            <input type="checkbox" name="five$4" id="five_4"/><label for="five_4">Option Four</label>
        </td>
    </tr>
</tbody>

感谢大家的帮助。这是我的答案 -

将此函数绑定到每个 checkboxlist.items 的 onclick 属性

function selectAll(box) { 

 //check if this is 'All' checkbox

 var isAll = ($(box).next('label').text() == 'All');

 //get the checkboxlist

 var theList = $(box).parents('table:first'); 

  //if 'All' is checked/clicked, check all options

  if (isAll) {
    var check = theList.find('input:checkbox')[0].checked; 
     $.each(theList.find('input:checkbox'), function(i, v) {
        v.checked = check;
     });
  } 

 // check 'All' option if all other checkboxes are checked     
 else {
     var allchecked = true;
     $.each(theList.find('input:checkbox'), function(i, v) { 
         if(i) if (!v.checked) allchecked = false;
     });
     theList.find('input:checkbox')[0].checked = allchecked; 
}

【问题讨论】：

标签： jquery select checkboxlist

【解决方案1】：

以下应该可以工作 [更新]

$(':checkbox').click( function() {
  // check if the label following the checkbox  is 'All'
  if ( $(this).next('label').text() == 'All') 
    {
     if ( $(this).is(':checked'))
       $(':checkbox').attr('checked', true)
     else
       $(':checkbox').attr('checked', false);
    }
} );

而且更正确的是，我们应该根据for属性，检查与点击的复选框对应的标签，而不是检查下一个标签。..

所以

if ( $(this).next('label').text() == 'All')

可能

if ( $('label[for="'+$(this).attr('id')+'"]').text() == 'All')

【讨论】：

谢谢。但这是一个动态复选框列表，因此我不可能知道“全部”选项的 ID。如上所示，我只能将 jquery 绑定到整个复选框列表。是否可以找到选中或未选中的选项？也就是说，检测用户是否选中了 'All' 选项并将 jquery 绑定到整个列表？
@Dave ，检查上面使其通用的更改

【解决方案2】：

$(document).ready(function() {

    $('input[type=checkbox]').click(function(){       //detects a check box click
        if ($(this).attr('id').indexOf("one_0") > -1){  //Checks if 'all' check box was clicked
            checkUncheckAll($(this).attr('checked'));   //Function call to check uncheck based on checked/unchecked state of All check box
        }
    });
});

//Function to check uncheck all check boxes
function checkUncheckAll(checkedValue) {
    $('input[type=checkbox]').each(function() {        
        this.checked = checkedValue;
    });
}

这种方法有一个缺陷 - 函数 checkUncheckAll 循环遍历表单中的所有复选框并选中/取消选中所有复选框。如果您适当地分配它们的 ID（即 checkSpec1、checkSpec2 等）并检测其 id 具有 checkSpec 字的复选框，您可以为一组特定的复选框执行此操作。

我希望这会有所帮助。

干杯

【讨论】：