すべて選択/すべて選択解除
サッカー"/> すべて選択/すべて選択解除
サッカー">

ホームページ  >  記事  >  ウェブフロントエンド  >  jquery attr がチェックボックスや選択などのフォーム要素を処理する場合の問題

jquery attr がチェックボックスや選択などのフォーム要素を処理する場合の問題

巴扎黑
巴扎黑オリジナル
2017-06-26 14:23:261469ブラウズ

HTML構造から始めましょう

<body><form action=""><input type="checkbox" id="checkedAll">全选/全不选<br><input type="checkbox" name="items" value="足球">足球<input type="checkbox" name="items" value="蓝球">蓝球<input type="checkbox" name="items" value="羽毛球">羽毛球<input type="checkbox" name="items" value="乒乓球">乒乓球<br><input type="button" id="send" value="提交"></form></body>

写真に示すように、これはフロントエンド上級の古典的な本[Sharp jquery]にあるケースで、attrメソッドを使用して要素に属性を追加し、選択とキャンセルを実現します。効果。

要件: 1. [すべて選択]/[すべて選択] をクリックして、下の 4 つのチェック ボックスの選択状態を変更します

2. 未選択のチェック ボックスがある限り、下のボタンを個別にクリックします。選択状態が解除されます 選択状態で、すべて選択されている場合は、上記の全選択/全選択解除も自動的に選択状態になります。

<script>"#checkedAll").on("click",
        // 判断点击后this.checked的结果,默认未选中即为false,第一次点击则为true,第二次为false,再赋值给下面的input(此处逻辑与书上稍有不同)
        // 注意事项: 使用attr给表单元素设置选中状态时,第二个参数一定要是布尔值true/false,不能习惯性写成带引号,那就是字符串了。
        if(this.checked){
            $("input[name=items]").attr("checked",true); 
        }else{
            $("input[name=items]").attr("checked",false);
        }
    })</script>
問題なく動作しているように見えますが、何度かクリックすると、属性は追加できますが、選択された状態は変化していないことがわかります。

何が問題ですか?

これは、jQuery のバージョンが原因です。1.6 以降では、要素の固有属性には

<strong>prop()</strong> メソッドを使用する必要があります。 <strong>prop()</strong> 方法。

<script>$("#checkedAll").on("click",function(){
        console.log(!this.checked);if(this.checked){
            $("input[name=items]").prop("checked",true);
        }else{
            $("input[name=items]").prop("checked",false);
        }
    })</script>
上記のコードは

<script>$("#checkedAll").on("click",function(){
        $("input").prop("checked",this.checked);
    })</script>

のように簡略化することもできます。

以上がjquery attr がチェックボックスや選択などのフォーム要素を処理する場合の問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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