在网页开发中，常常会遇到需要实现复选框（checkbox）的全选、全不选以及单个选择的功能。这里我们主要探讨如何使用原生JavaScript和jQuery来实现这一功能，同时考虑到行内点击选择的效果。本文将详细介绍两种实现方法，并提供核心代码。
我们来看原生JavaScript版本的实现。在HTML部分，我们需要创建一个包含全选/全不选复选框和多个普通复选框的表单。每个普通复选框都应有一个共同的名称，以便在JavaScript中进行操作。例如：
```html
<form id="js" name="js" action="#">
<h5>原生JS样例</h5>
<dl>
<dt><label for="js_chk_0"><input type="checkbox" id="js_chk_0" name="chk_can" value="" />全选/全不选</label></dt>
<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/全不选,点行也可选中或取消</dd>
<!-- 更多dd元素... -->
</dl>
</form>
```
接下来是原生JavaScript的核心代码，我们需要在页面加载完成后，对所有相关的复选框进行事件绑定和状态同步：
```javascript
window.onload = function iCheckAll() {
var js_chk = document.forms['js'].chk_can;
var jsitems = document.forms['js'].jsitems;
var jsrows = document.getElementById('js').getElementsByTagName('dd');
// 判断选中个数与实际选框个数实现全选/全不选框的状态
var chk_canle = function() {
var checkedLen = 0;
// 计算列表中选中状态的选框个数
for (var m = 0; m < jsitems.length; m++) {
if (jsitems[m].checked) {
checkedLen += 1;
}
}
// 判断选中个数与实际个数是否相同,以确定全选/全不选状态
for (var m = 0; m < js_chk.length; m++) {
js_chk[m].checked = (jsitems.length == checkedLen);
}
}
// 全选与全不选一体实现
for (var i = 0; i < js_chk.length; i++) {
js_chk[i].onclick = function() {
// 列表中选框与全选选框统一状态
for (var j = 0; j < jsitems.length; j++) {
jsitems[j].checked = this.checked;
}
// 更新全选/全不选框的状态
chk_canle();
}
}
// 行内点击选中行内复选框
for (var i = 0; i < jsrows.length; i++) {
jsrows[i].onclick = function(event) {
var target = event.target;
if (target.tagName.toLowerCase() === 'input') {
this.querySelector('input[type="checkbox"]').checked = !this.querySelector('input[type="checkbox"]').checked;
// 更新全选/全不选框的状态
chk_canle();
}
}
}
}
```
这段代码中，`chk_canle`函数用于计算选中状态的复选框数量，并同步全选/全不选复选框的状态。`js_chk[i].onclick`事件处理程序实现了全选/全不选复选框的点击，它会将所有普通复选框设置为与全选/全不选复选框相同的选中状态，并调用`chk_canle`函数更新状态。`jsrows[i].onclick`事件处理程序允许用户点击行内的文本，从而选中或取消复选框。
现在我们转向jQuery版本的实现。jQuery简化了事件绑定和DOM操作，使得代码更简洁：
```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var $js_chk = $('input[name="chk_can"]');
var $jsitems = $('input[name="jsitems"]');
var $jsrows = $('#js dd');
$js_chk.on('click', function() {
$jsitems.prop('checked', this.checked);
updateCheckedStatus();
});
$jsrows.on('click', function(event) {
var $checkbox = $(event.target).is('input[type="checkbox"]') ? $(event.target) : $(this).find('input[type="checkbox"]');
$checkbox.prop('checked', !$checkbox.prop('checked'));
updateCheckedStatus();
});
function updateCheckedStatus() {
$js_chk.prop('checked', $jsitems.filter(':checked').length === $jsitems.length);
}
});
</script>
```
在这个jQuery版本中，我们使用`$()`选择器来获取元素，并使用`.on()`方法绑定事件。`updateCheckedStatus`函数负责更新全选/全不选复选框的状态。与原生JavaScript版本相比，jQuery提供了更直观和简洁的API来处理DOM操作和事件。
总结，无论是原生JavaScript还是jQuery，实现复选框的全选/全不选以及行内点击选择都是通过监听复选框和行的点击事件，以及实时更新全选/全不选复选框的状态来完成的。两种方法都能达到预期效果，但jQuery通常能提供更简洁的语法和更好的性能优化。在实际项目中，开发者可以根据需求和团队习惯选择合适的方法。
