首頁 > web前端 > js教程 > 主體

jQuery操作checkbox實作多項選取與取消選取的實例

黄舟
發布: 2018-05-15 13:49:55
原創
3639 人瀏覽過

我們在之前的文章中我們給大家介紹了關於jQuery操作checkbox的方法詳解,既然我們已經了解過checkbox的方法,那我們如何使用checkbox實現多項選中呢?今天我們就帶大家介紹下jQuery操作checkbox實作多項選取與取消選取的實例!

首先我們先看效果圖:

<html>
<head>
    <title></title>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        function check() {
            var code = "";
            //$("input[name=chkname][value=AAAAA],[value=BBBBB]").attr("checked", true);//固有属性
            $("input[name=chkname][value=AAAAA],[value=BBBBB]").prop("checked", true);//自定义的DOM属性
        }
        function clearcheck() {
            $("input[name=chkname]").removeAttr("checked");
        }
    </script>
</head>
<body>
    <input type="checkbox" value="AAAAA" name="chkname" />AAAAA
    <input type="checkbox" value="BBBBB" name="chkname" />BBBBB
    <input type="checkbox" value="CCCCC" name="chkname" />CCCCC
    <input type="checkbox" value="DDDDD" name="chkname" />DDDDD
    <br />
    <input id="btnCheck" type="button" value="选中[value=AAAAA],[value=BBBBB]" onclick="check()" />
    <input id="btnClear" type="button" value="取消选中" onclick="clearcheck()" />
    <br />
  
<pre class="brush:php;toolbar:false">
对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
如果在ajax加载方式,attr无效时就使用prop。

<html>
<head>
<title></title>
<script src="jquery-1.8.3.min.js"></script>
<script>
function check() {
var code = "";
$("input[name=chkname][value=AAAAA],[value=BBBBB]").attr("checked", true);
}
function clearcheck() {
$("input[name=chkname]").removeAttr("checked");
}
</script>
</head>
<body>
<input type="checkbox" value="AAAAA" name="chkname" />AAAAA
<input type="checkbox" value="BBBBB" name="chkname" />BBBBB
<input type="checkbox" value="CCCCC" name="chkname" />CCCCC
<input type="checkbox" value="DDDDD" name="chkname" />DDDDD
<br />
<input id="btnCheck" type="button" value="选中[value=AAAAA],[value=BBBBB]" onclick="check()" />
<input id="btnClear" type="button" value="取消选中" onclick="clearcheck()" />
</body>
</html>
登入後複製

總結:

本文使用圖文代碼的效果為大家展示了jQuery操作checkbox實現多項選中與取消選中的實例,對此小伙伴們對checkbox實現多項選中有了進一步的了解,希望對你的工作有所幫助!

相關推薦:

#jQuery運算CheckBox的方法實例詳解

jquery一鍵控制checkbox全選,反選,全不選的方法

在js中如何獲得checkbox裡選中的多個值

checkbox實作click#事件觸發span元素內容改變# #

以上是jQuery操作checkbox實作多項選取與取消選取的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板