JS实现全选功能

erictao9001

JS实现全选功能

 

以下为实现全选功能的js代码，其中ready方法绑定每个checkbox的click事件，全局的监控当前每个checkbox的状态，并动态的拼接出每个被选中的checkbox的id。

 

<script language="javascript">    $().ready(function() {$("input[name='id']").click(function() {var ids = "";var allChecked = true;$('input[name=id]').each(function() {        if (!$(this).attr('checked')) {           allChecked = false;        }    });   $("#allChecked").attr("checked", allChecked);   $("input[name='id']:checked").each(function() {ids += $(this).val() + ",";});ids = ids.substr(0, (ids.length - 1));   $("#ids").val(ids);});});function selectAll(obj) {var ids = "";$("input[name='id']").each(function() {    $(this).attr("checked", obj.checked);    });$("input[name='id']:checked").each(function() {ids += $(this).val() + ",";});ids = ids.substr(0, (ids.length - 1));$("#ids").val(ids);}</script> 
以下为html页面全选checkbox和每个单一checkbox的html代码。
 <!-- 全选的checkbox --><input type="checkbox" id="allChecked"  /><!-- 每个单一的checkbox --><input type="checkbox" name="id" value="XXX" /><!-- 用于存放被选中checkbox的id拼接后的字符串 --><input type="hidden" id="ids" name="ids" />