jquery处理checkbox-阿里云开发者社区

开发者社区> 开发与运维> 正文

jquery处理checkbox

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

 

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

 

作者:Tyler Ning
出处:http://www.cnblogs.com/tylerdonet/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过以下邮箱地址williamningdong@gmail.com  联系我,非常感谢。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章