论坛 › Web开发 › JS实现全选功能

so_brave 发表于 2012-02-04 13:38

JS实现全选功能

JS实现全选功能


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



Js代码<script language="javascript">   
    $().ready(function() {   
      $("input").click(function() {   
            var ids = "";   
            var allChecked = true;   
               
            $('input').each(function() {   
                if (!$(this).attr('checked')) {   
                   allChecked = false;   
                }   
            });   
         
            $("#allChecked").attr("checked", allChecked);   
         
            $("input:checked").each(function() {   
                ids += $(this).val() + ",";   
            });   

            ids = ids.substr(0, (ids.length - 1));   
         
            $("#ids").val(ids);   
      });   
    });   

    function selectAll(obj) {   
      var ids = "";   
         
      $("input").each(function() {   
            $(this).attr("checked", obj.checked);   
      });   

      $("input:checked").each(function() {   
            ids += $(this).val() + ",";   
      });   

      ids = ids.substr(0, (ids.length - 1));   

      $("#ids").val(ids);   
    }   
</script>

<script language="javascript">
    $().ready(function() {
                $("input").click(function() {
                        var ids = "";
                        var allChecked = true;
                       
                        $('input').each(function() {
                        if (!$(this).attr('checked')) {
                           allChecked = false;
                        }
                  });
               
                           $("#allChecked").attr("checked", allChecked);
               
                           $("input:checked").each(function() {
                                ids += $(this).val() + ",";
                        });

                        ids = ids.substr(0, (ids.length - 1));
               
                           $("#ids").val(ids);
                });
        });

        function selectAll(obj) {
                var ids = "";
               
                $("input").each(function() {
                  $(this).attr("checked", obj.checked);
          });

                $("input:checked").each(function() {
                        ids += $(this).val() + ",";
                });

                ids = ids.substr(0, (ids.length - 1));

                $("#ids").val(ids);
        }
</script> 以下为html页面全选checkbox和每个单一checkbox的html代码。

Html代码<!-- 全选的checkbox -->
<input type="checkbox" id="allChecked" onclick="selectAll(this);" />

<!-- 每个单一的checkbox -->
<input type="checkbox" name="id" value="XXX" />

<!-- 用于存放被选中checkbox的id拼接后的字符串 -->
<input type="hidden" id="ids" name="ids" />

小忻黑夜 发表于 2012-02-04 13:39

谢谢分享

pitonas 发表于 2012-02-09 20:02

推荐

查看完整版本: JS实现全选功能