jQuery 1.9 带来了一些重要的更新和改进,其中包括对复选框(Checkbox)的全选功能。
在以前的版本中,实现Checkbox全选功能要么使用逐个选中的方式,要么使用插件的方式。但是在jQuery 1.9中,我们可以使用更加简单的方式实现全选功能。
首先,我们需要在HTML代码中创建一个全选的Checkbox和一些需要被全选的子Checkbox。
<input type="checkbox" id="selectAll"> 全选 <input type="checkbox" name="childCheckbox" value="1"> <input type="checkbox" name="childCheckbox" value="2"> <input type="checkbox" name="childCheckbox" value="3"> <input type="checkbox" name="childCheckbox" value="4"> <input type="checkbox" name="childCheckbox" value="5">
接下来,在JavaScript代码中,在页面加载完毕后,我们需要监听全选Checkbox的变化,并根据其状态来修改所有子Checkbox的选中状态。
$(document).ready(function() { $("#selectAll").change(function() { $("input[name='childCheckbox']").prop('checked', $(this).prop("checked")); }); });
这段代码中,我们使用了jQuery的change()方法来监听全选Checkbox的变化。当全选Checkbox的状态发生变化时,我们使用prop()方法来修改所有子Checkbox的选中状态。
使用jQuery 1.9来实现复选框的全选功能,只需要几行简单的代码即可完成,提高了开发效率,也使得代码更加易于维护。