首页 > 代码库 > jQuery操作checkbox选择

jQuery操作checkbox选择

1、checkbox list选择

效果图:

代码:

<!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="http://www.mamicode.com/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="http://www.mamicode.com/今日话题" />今日话题        <input name="chkItem" type="checkbox" value="http://www.mamicode.com/视觉焦点" />视觉焦点        <input name="chkItem" type="checkbox" value="http://www.mamicode.com/财经" />财经        <input name="chkItem" type="checkbox" value="http://www.mamicode.com/汽车" />汽车        <input name="chkItem" type="checkbox" value="http://www.mamicode.com/科技" />科技        <input name="chkItem" type="checkbox" value="http://www.mamicode.com/房产" />房产        <input name="chkItem" type="checkbox" value="http://www.mamicode.com/旅游" />旅游    </div>    <div>        <input id="btnCheckAll" type="button" value="http://www.mamicode.com/全选" />        <input id="btnCheckNone" type="button" value="http://www.mamicode.com/全不选" />        <input id="btnCheckReverse" type="button" value="http://www.mamicode.com/反选" />        <input id="btnSubmit" type="button" value="http://www.mamicode.com/提交" />    </div></body></html>

2、checkbox table选中

效果图:

代码:

<!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>    <style type="text/css">        table        {            border-collapse: collapse;        }        td        {            border: 1px solid #ccc;        }    </style>    <script src="http://www.mamicode.com/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="http://www.mamicode.com/今日话题" />                </td>                <td>                    今日话题                </td>            </tr>            <tr>                <td>                    <input name="chkItem" type="checkbox" value="http://www.mamicode.com/视觉焦点" />                </td>                <td>                    视觉焦点                </td>            </tr>            <tr>                <td>                    <input name="chkItem" type="checkbox" value="http://www.mamicode.com/财经" />                </td>                <td>                    财经                </td>            </tr>            <tr>                <td>                    <input name="chkItem" type="checkbox" value="http://www.mamicode.com/汽车" />                </td>                <td>                    汽车                </td>            </tr>            <tr>                <td>                    <input name="chkItem" type="checkbox" value="http://www.mamicode.com/科技" />                </td>                <td>                    科技                </td>            </tr>            <tr>                <td>                    <input name="chkItem" type="checkbox" value="http://www.mamicode.com/房产" />                </td>                <td>                    房产                </td>            </tr>            <tr>                <td>                    <input name="chkItem" type="checkbox" value="http://www.mamicode.com/旅游" />                </td>                <td>                    旅游                </td>            </tr>        </tbody>    </table></body></html>
http://www.cnblogs.com/libingql/archive/2011/11/07/2238663.html

jQuery操作checkbox选择