zoukankan      html  css  js  c++  java
  • checkbox 全选 单选的使用

    绑定数据

     if (!IsPostBack)
            {
                using (UsersDataContext con = new UsersDataContext())
                {
                    Repeater1.DataSource = con.Users.ToList();
                    Repeater1.DataBind();
                }
            }
    View Code

    后台 checkbox 选中状态 去的值

        void Button1_Click(object sender, EventArgs e)
        {
           Label1.Text=Request["ck"];
        }
    View Code

    html   显示  和布局代码

     <asp:Button ID="Button1" runat="server" Text="Button" />
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    
    
                <table style="background-color: navy; text-align: center;">
                    <tr style="color: white; font-size: 20px;">
                        <%--全选用的纯元素--%>
                        <td>
                            <input type="checkbox" id="ckall" /><label for="ckall">全选</label></td>
                        <td>编号</td>
                        <td>用户名</td>
                    </tr>
    
                    <asp:Repeater ID="Repeater1" runat="server">
                        <ItemTemplate>
                            <tr style="background-color: white;">
                                <td>
                                    <%--单选用的纯元素--%>
                                    <input type="checkbox" name="ck" value='<%#Eval("Ids") %>' /></td>
                                <td><%#Eval("Ids") %></td>
                                <td><%#Eval("username") %></td>
                            </tr>
                        </ItemTemplate>
                    </asp:Repeater>
                </table>
    View Code

    js写用 的代码

    <script type="text/javascript">
        var ckall = document.getElementById("ckall");
        var cks = document.getElementsByName("ck");
        ckall.onclick = function () {
    
            for (var i = 0; i < cks.length; i++) {
                cks[i].checked = this.checked;
            }
        }
    
        for (var i = 0; i < cks.length; i++) {
            var count = 0;
            for (var j = 0; j < cks.length; j++) {
                //假设有一个 没选  count +1
                if (cks[j].checked == false)
                    count++;
            }
            //都选   全选  选中状态
            if (count == 0) {
                ckall.checked = true;
            }
            else {
    
                ckall.checked = false;
            }
    
        }
    
    
    </script>
    View Code
  • 相关阅读:
    seeting菜单界面形成--优化
    setting菜单界面的形成--未优化
    (转)最强Android模拟器genymotion的安装与配置
    (转)Android SlidingTabLayout定制分割线和指示条颜色
    【前端】CSS入门笔记
    【前端】XHTML入门笔记
    【Java】Java学习笔记
    【英语】20141022 生词
    【学习】Git和Github菜鸟入门
    【英语】20141015 生词
  • 原文地址:https://www.cnblogs.com/zhangwei99com/p/6940866.html
Copyright © 2011-2022 走看看