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.rzrgm.cn/libingql/archive/2011/11/07/2238663.html

posted @ 2013-04-15 02:47 nd 閱讀(3584) 評論(0) 收藏舉報

刷新頁面返回頂部

jquery處理checkbox

公告