jQuery操作checkbox選擇程式碼

mpsky發表於2021-09-09
jQuery

         <head runat="server">
    <title></title>    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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="分類六" />分類六    </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>


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/1806/viewspace-2815871/，如需轉載，請註明出處，否則將追究法律責任。

相關文章