jquery一键控制checkbox全选、反选或全不选

jquery attr()方法获取标签的 checked 会有问题，所以用了 prop() 方法。 Hml的checkbox没有加name，只用了 div 嵌套。 如有更好的方法，望指点!! //全选 $('#allChecked').change(function(){ $('#box').children(':checkbox').prop('checked',$(this).is(':checked')?true:false); }); //反选 $('#invertChecked').change(function(){ if($(this).is(':checked') 在jQuery中，对复选框（checkbox）进行全选、反选或全不选的操作是常见的需求，特别是在处理用户交互时。在这个例子中，我们看到一个利用jQuery实现的简单示例，通过三个独立的事件处理器来实现这些功能。以下是详细的知识点解析： 1. **prop() vs attr()**： 在jQuery中，`attr()`和`prop()`都用于获取或设置元素属性，但它们之间有微妙的区别。`attr()`主要适用于HTML属性，而`prop()`用于处理DOM元素的属性。对于`checked`属性，使用`prop()`更合适，因为它涉及到元素的状态，而不仅仅是HTML标记。在示例中，`prop()`被用来改变复选框的选中状态。 2. **全选操作**： `$('#allChecked').change(function() { ... })`：这个事件监听器会在`#allChecked`复选框的选中状态改变时触发。内部的代码`$('#box').children(':checkbox').prop('checked', $(this).is(':checked') ? true : false)`会设置`#box`元素内所有子复选框的选中状态与`#allChecked`相同。如果`#allChecked`被选中，所有子复选框都会被选中；反之，则全部取消选中。 3. **反选操作**： `$('#invertChecked').change(function() { ... })`：当`#invertChecked`被改变时，这段代码会执行。如果`#invertChecked`被选中，它将遍历`#box`下的所有子复选框，用`each()`函数。然后，对于每个复选框，它将反转其选中状态。如果当前复选框已被选中，`$(this).is(':checked')`为真，那么它将变为未选中；反之，如果未选中，将变为选中。 4. **一键控制全选/反选/全不选**： `$('#orChecked').change(function() { ... })`：这个事件处理器处理了全选、反选和全不选三种情况。它检查`#orChecked`是否被选中，然后根据当前复选框的状态和选中情况决定执行哪种操作。如果所有子复选框都不被选中，`#orChecked`被选中时将全选所有复选框。如果有任何复选框被选中，`#orChecked`被选中时则执行反选操作。如果`#orChecked`取消选中，所有子复选框的选中状态都会被取消。 5. **HTML结构**： 示例中，复选框被包含在`<div id="box">`中，这使得可以通过CSS选择器轻松地访问它们。`<input type="checkbox" id="allChecked">`、`<input type="checkbox" id="invertChecked">`和`<input type="checkbox" id="orChecked">`是控制全选、反选和一键切换的复选框。 6. **JavaScript事件**： 使用`.change()`方法绑定事件监听器，当复选框的选中状态改变时，对应的函数会被调用。这种方法可以确保每次选中状态变化时，相应的操作都会被执行。 7. **逻辑判断**： 在`#orChecked`的事件处理器中，`if(box.length == box.filter(':not(:checked)').length)`用来判断是否所有的复选框都没有被选中。`filter(':not(:checked)')`会返回未被选中的复选框，如果其长度等于所有子复选框的长度，说明所有复选框都是未选中的，此时执行全选操作。 通过以上解析，我们可以理解这个示例是如何通过jQuery实现复选框的全选、反选和全不选功能的，并且了解到在处理这类问题时需要注意的细节，包括使用`prop()`而不是`attr()`来处理`checked`属性，以及如何通过事件监听和条件判断来实现所需的行为。