zoukankan      html  css  js  c++  java
  • Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div>
    <asp:Repeater ID="rptShopList" runat="server" OnItemDataBound="rptShopList_OnItemDataBound">
          <ItemTemplate>
             <input name="chk" type="checkbox" /></li>
          </ItemTemplate>
    </asp:Repeater>
    $(function () {
       //获取全选按钮,单选按钮的集合
       var $all = $("#chkAll"), $chks = $("input[name='chk']");
       $all.click(function () {
       $chk.prop("checked", this.checked);
       });
       $chk.click(function () {
       $all.prop("checked", $chks.length == $chks.filter(":checked").length ? true : false);
       });
    });

     如果要获取勾选的值,代码如下:

    var chks = "";
    $(function(){
           var $all = $("#chkAll,#chkAll2"), $chk = $("input[name='chk']");
           $all.click(function () {
           chks = "";//每次勾选时。需要清空之前勾选项的值,以免chks中出现重复值
           $chk.prop("checked", this.checked);
           $all.prop("checked", this.checked);
           $("input[name='chk']:checked").each(function () {
               chks += $(this).val() + ",";//设置勾选项的值集合,以“,”隔开
           })
       });
           $chk.click(function () {
               chks = "";
               var $chks = $("input[name='chk']");
               $all.prop("checked", $chks.length == $chks.filter(":checked").length ? true : false);
               $("input[name='chk']:checked").each(function () {
                chks += $(this).val() + ",";
           })
       });
    });

    Jquery控制全选与取消全选,单独一个一个取消勾选全部子项,“全选”按钮也不勾选,但若单独一个一个勾选全部子项,则“全选”按钮也勾选.

    设置某项勾选但不可编辑,例子如下:

    Repeater中:
    <input id="chk" name="chk" type="checkbox" value='<%#Eval("ShippingAddressID") %>|<%#Eval("IsDefault") %>' />//ShippingAddressID是编号,IsDefault是否是默认的
    var $chk = $("input[name='chk']");
    $chk.each(function () {
       if ($(this).val().split('|')[1] == "True") {
           $(this).attr("checked", true);//将默认收货地址勾选
           $(this).attr("disabled", true);//设为不可编辑
           $(this).attr("title", "默认收货地址");//添加提示文字
       }
       else
           $(this).attr("checked", false);
    })
  • 相关阅读:
    Linq的Except
    BZOJ 1324 Exca神剑 最小割
    先学习Oracle 11g的Automatic Diagnostic Repository新功能
    NYOJ 300 &amp;&amp; hdu 2276 Kiki &amp; Little Kiki 2 (矩阵高速功率)
    V微软S2015下载:开展Win10/Linux/iOS多平台软件
    LeetCode Length of Last Word
    QT 打开文件对话框汇总
    取缔Chrome装载电脑管家的广告过滤脚本代码
    三种常见的图像处理双三次插值算法
    Best Time to Buy and Sell Stock I,II,III [leetcode]
  • 原文地址:https://www.cnblogs.com/gawking/p/3531113.html
Copyright © 2011-2022 走看看