checkbox 全选 单选的使用

绑定数据

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

后台 checkbox 选中状态 去的值

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

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>

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>

时间: 2024-12-16 04:35:28

checkbox 全选 单选的使用的相关文章

练习-checkbox 全选 ,反选, 单选,以及取值

1.方法1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>全选与反选</title> <meta http-equiv="Content-Type" content="te

checkbox全选/取消全选

//checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $("input[name='cbxCommodity']").prop("checked","checked"); }else{ $("input[name='cbxCommodity']").removeAttr("check

关于input[type=&#39;checkbox&#39;]全选的问题

今天在做一个全选功能的时候,发现了一个问题,就是如果我在选择全选之前,我就已经选择了一个input,然后我再去选择全选并且以后再取消全选的时候,这个我之前选择的input始终处于选择状态,但是他的checked的值一直是在true和false之间变化,当checked=false的时候,仍然是被选中的.到现在还没处理好这个问题.希望看到的哪位大神能给个好的解决办法,实在感激.下面是类似的代码. <!DOCTYPE html><html lang="en"><

利用jQuery实现CheckBox全选/全不选/反选

转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js–>测试通过,jquery-1.5.1.js–>测试不通过. 实现CheckBox全选/全不选/反选代码如下: <%@ page language="java" pageEncoding="UTF-8"%>   <!DOCTYPE

js初学—实现checkbox全选功能

布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id="div1"> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkb

checkbox 全选,反选 ,全不选

在表格或者列表中经常会遇到要全选或者反选等交互,今天总结了一下代码,保留着以后直接拿来用 原理: 1. 全选:当全选checkbox被点击(不管点击之前是什么状态)后,获取其checked状态.然后对列表进行循环检测,此时可以将所有的(无论之前什么状态),设为选中,也可对未选中的进行选中. 2. 反选:当反选checkbox被点击(不管点击之前是什么装填)后,获取其其状态值,对列表进行循环检测,将被检测的元素的checked状态反向处理,即可. 3. 列表全选或者不全选:当列表中的任意一个che

jQuery设置checkbox全选(区别jQuery版本)

jQuery设置checkbox全选在网上有各种文章介绍,但是为什么在我们用他们的代码的时候就没有效果呢? 如果你的代码一点错误都没有,先不要急着怀疑人家代码的正确性,也许只是人家跟你用的jQuery版本不同而已. jQuery很多版本都会对一些小的功能做一些改进,比如checkbox的选中. jQuery对checkbox改动的界线版本 jquery1.9.1. jquery1.9.1之前,全选是这样的: $('#checkbox').attr('checked',true) $('#chec

Jquery 组checkbox全选checkbox

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <title></title> <style> </style></head><body><form action=""> <input type="checkbox&quo

表单javascript checkbox全选 反选 全不选

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>javascript checkbox全选 反选 全不选</title> <meta name="des