すべてを選択して選択を反転し、1 回の click_jquery で 1 回実行するための Jquery ソリューション-jsチュートリアル-php.cn

すべてを選択して選択を反転し、1 回の click_jquery で 1 回実行するための Jquery ソリューション

WBOY

リリース： 2016-05-16 15:45:01

オリジナル

1138 人が閲覧しました

コード要件: attr の使用は 1 回のみ実行でき、prop の使用はすべての選択と逆選択を完全に実現し、選択されたすべての項目を取得し、選択された項目のテキストを文字列に形成できます。

解決策 1:

コードは次のとおりです:

<html>
<head>
　　<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
　　<input type="checkbox" name="chk_list[]" value="1" />1
　　<input type="checkbox" name="chk_list[]" value="2" />2
　　<input type="checkbox" name="chk_list[]" value="3" />3
　　<input type="checkbox" name="chk_list[]" value="4" />4
　　<input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选
<script type="text/javascript">
　　$("#chk_all").click(function(){
 　　// 使用attr只能执行一次
 　　$("input[name='chk_list[]']").attr("checked", $(this).attr("checked")); 
 　　// 使用prop则完美实现全选和反选
 　　$("input[name='chk_list[]']").prop("checked", $(this).prop("checked"));
　　　　// 获取所有选中的项并把选中项的文本组成一个字符串
 　　var str = '';
 　　$($("input[name='chk_list[]']:checked")).each(function(){
 　　str += $(this).next().text() + ',';
 　　});
 　　alert(str);
　　});
</script>
</body>
</html>

ログイン後にコピー

概要:

HTML要素自体の固有属性については、処理時にpropメソッドを使用します。

HTML 要素の独自のカスタム DOM 属性については、処理時に attr メソッドを使用します。

参考 http://www.jb51.net/article/62308.htm

解決策 2:

問題の説明:

$(".chooseall").click(function(){
 if($(".chooseall").attr("checked") == "checked"){
$("input[name='checkbox1']").removeAttr("checked","checked");
 console.log(1);
 }else{
 $("input[name='checkbox1']").attr("checked","checked");
 console.log(2);
 }
});

ログイン後にコピー

上記のコードの 1 回目と 2 回目のクリックでは選択機能と逆選択機能を実現できますが、1 回実行すると機能しなくなります。

何が起こっているのでしょうか?

最初のチェックボックスを除いて、残りは ajax によって動的に生成されます。これは何か関係がありますか? Console.logはクリックするたびに1と2を交互に出力できますが、途中のコードは実行できません。

解決策:

removeAttr パラメータは 1 つだけ必要です、removeAttr("checked")
ただし、

に置き換えることをお勧めします。

$(".chooseall").click(function(){
 if($(".chooseall").prop("checked") == true){
 $("input[name='checkbox1']").prop("checked", false);
 console.log(1);
 }else{
 $("input[name='checkbox1']").prop("checked", false);
 console.log(2);
 }
});

ログイン後にコピー

もっと簡潔に言えば、

$(".chooseall").click(function(){
 var isChecked = $(this).prop("checked");
 $("input[name='checkbox1']").prop("checked", isChecked);
});

ログイン後にコピー

上記は、ワンクリックですべてを選択し、選択を反転するための Jquery ソリューションです。皆さんのお役に立てれば幸いです。