ホームページ  >  記事  >  ウェブフロントエンド  >  複数の選択と選択解除を実装するための jQuery 操作チェックボックスの例

複数の選択と選択解除を実装するための jQuery 操作チェックボックスの例

黄舟
黄舟オリジナル
2018-05-15 13:49:553628ブラウズ

前回の記事では、

jQueryでチェックボックスを操作する方法について詳しく説明しました。チェックボックスのメソッドは理解できたので、チェックボックスを使用して複数選択を実現するにはどうすればよいでしょうか。今回はjQueryを使ってチェックボックスを操作して複数選択・選択解除を実現する例を紹介します!

まず第一に、レンダリングを見てみましょう:

<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 を操作する方法の詳細な例

チェックボックスの選択、反転選択、および選択解除をすべて制御する jquery メソッド

JS内チェックボックスで選択された複数の値を取得する方法

チェックボックスは、スパン要素のコンテンツ変更をトリガーするクリックイベントを実装します

以上が複数の選択と選択解除を実装するための jQuery 操作チェックボックスの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:jQuery APIの使い方次の記事:jQuery APIの使い方