jquery处理checkbox

 

1.控制checkbo只能选择其中一项

想用radiobox做单选题的选项,但是为了便于取值要用服务器空间,带来的麻烦就是不能使用name属性控制他们属于同一个域,现在使用checkbox+js的方式来实现radiobox的效果。

html代码:

复制代码
<li class="liStyle">
    1.&nbsp;&nbsp;阿斯顿按时<label class="fillTims" style="display: none" id="selectTips">请选择</label>
    <!--begin选项-->
    <ul>
        
                <li class="liStyle2">
                    <span id="labOption">A         </span>.阿萨德发<input type="hidden" value="1" id="hidID" name="repSingle$ctl00$repSingleChoices$ctl00$hidID">
                    <input type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl00$cheSingleChoice" id="cheSingleChoice"></li>
            
                <li class="liStyle2">
                    <span id="labOption">B         </span>.阿萨德发<input type="hidden" value="2" id="hidID" name="repSingle$ctl00$repSingleChoices$ctl01$hidID">
                    <input type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl01$cheSingleChoice" id="cheSingleChoice"></li>
            
                <li class="liStyle2">
                    <span id="labOption">C         </span>.阿斯顿<input type="hidden" value="3" id="hidID" name="repSingle$ctl00$repSingleChoices$ctl02$hidID">
                    <input type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl02$cheSingleChoice" id="cheSingleChoice"></li>
            
    </ul>
    <!--end选项-->
    <br>
</li>
复制代码

js代码:

复制代码
//fun1_1 单选题只能选中选项其一
function mutipleCheckAction() {
    $("ul#ulSingle>li.liStyle>ul>li.liStyle2>:checkbox").click(function () {
        var count = $("ul#ulSingle>li.liStyle>ul>li.liStyle2>:checkbox").length;
        for (var i = 0; i < count; i++) {
            $("ul#ulSingle>li.liStyle>ul>li.liStyle2>:checkbox:eq(" + i + ")").attr("checked", false)
        }
        $(this).attr("checked", true);
    })
}
复制代码

 

2.checkbox的常见方法

常用的方法有全选,全部选,反选等

html代码:

复制代码
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // 全选
            $("#btnCheckAll").bind("click", function () {
                $("[name = chkItem]:checkbox").attr("checked", true);
            });
            // 全不选
            $("#btnCheckNone").bind("click", function () {
                $("[name = chkItem]:checkbox").attr("checked", false);
            });
            // 反选
            $("#btnCheckReverse").bind("click", function () {
                $("[name = chkItem]:checkbox").each(function () {
                    $(this).attr("checked", !$(this).attr("checked"));
                });
            });
            // 全不选
            $("#btnSubmit").bind("click", function () {
                var result = new Array();
                $("[name = chkItem]:checkbox").each(function () {
                    if ($(this).is(":checked")) {
                        result.push($(this).attr("value"));
                    }
                });
                alert(result.join(","));
            });
        });
    </script>
</head>
<body>
    <div>
        <input name="chkItem" type="checkbox" value="今日话题" />今日话题
        <input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点
        <input name="chkItem" type="checkbox" value="财经" />财经
        <input name="chkItem" type="checkbox" value="汽车" />汽车
        <input name="chkItem" type="checkbox" value="科技" />科技
        <input name="chkItem" type="checkbox" value="房产" />房产
        <input name="chkItem" type="checkbox" value="旅游" />旅游
    </div>
    <div>
        <input id="btnCheckAll" type="button" value="全选" />
        <input id="btnCheckNone" type="button" value="全不选" />
        <input id="btnCheckReverse" type="button" value="反选" />
        <input id="btnSubmit" type="button" value="提交" />
    </div>
</body>
</html>
复制代码

 用checkbox本身实现全选和反选

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // chkAll全选事件
            $("#chkAll").bind("click", function () {
                $("[name = chkItem]:checkbox").attr("checked", this.checked);
            });
            // chkItem事件
            $("[name = chkItem]:checkbox").bind("click", function () {
                var $chk = $("[name = chkItem]:checkbox");
                $("#chkAll").attr("checked", $chk.length == $chk.filter(":checked").length);
            })
        });
    </script>
</head>
<body>
    <table id="tb">
        <thead>
            <tr>
            <td><input id="chkAll" type="checkbox" /></td>
            <td>分类名称</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input name="chkItem" type="checkbox" value="今日话题" /></td>
                <td>今日话题</td>
            </tr>
            <tr>
                <td><input name="chkItem" type="checkbox" value="视觉焦点" /></td>
                <td>视觉焦点</td>
            </tr>
            <tr>
                <td><input name="chkItem" type="checkbox" value="财经" /></td>
                <td>财经</td>
            </tr>
            <tr>
                <td><input name="chkItem" type="checkbox" value="汽车" /></td>
                <td>汽车</td>
            </tr>
            <tr>
                <td><input name="chkItem" type="checkbox" value="科技" /></td>
                <td>科技</td>
            </tr>
            <tr>
                <td><input name="chkItem" type="checkbox" value="房产" /></td>
                <td>房产</td>
            </tr>
            <tr>
                <td><input name="chkItem" type="checkbox" value="旅游" /></td>
                <td>旅游</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
复制代码

参考:http://www.cnblogs.com/libingql/archive/2011/11/07/2238663.html

 

posted @   nd  阅读(3568)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
点击右上角即可分享
微信分享提示