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 @ 2013-04-15 02:47  nd  阅读(3558)  评论(0)  编辑  收藏  举报