Jqueryすべてのチェックボックスをオフにする複数のフォーム

すべての機能を選択/選択解除するなどのフィルタをビルドしようとしています。Jqueryすべてのチェックボックスをオフにする複数のフォーム

私はたくさんの正しい例を作りましたが、どれもデモ上に複数のフィルタを持っていませんでしたが、今はそれが奇妙な動作をしています。

私はフィルタ2のために（すべての）細かい作業ではなく、フィルタ1 it'isのために（すべて）をクリックしてください...

JSFIDDLE：

https://jsfiddle.net/Max06270/pvtqpn8a/#&togetherjs=2tvV3Mhb7l

HTML：

<div id="filter1"> 
    <form action='#'> 
    <input type="checkbox" id="select-all" checked>(All)<br> 
    <!-- Should select/unselect only the F1 checkboxes --> 
    <input type="checkbox" id="checkbox-f1" checked>F1: Value1<br> 
    <input type="checkbox" id="checkbox-f1" checked>F1: Value2<br> 
    <input type="checkbox" id="checkbox-f1" checked>F1: Value3<br> 
    <input type="checkbox" id="checkbox-f1" checked>F1: Value4<br> 
    <input type="submit" id="submit-f1" value="Apply"> 
    </form> 
</div>   
<br> 
<div id="filter2"> 
    <form action='#'> 
    <input type="checkbox" id="select-all" checked>(All)<br> 
    <!-- Should select/unselect only the F2 checkboxes --> 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value1<br> 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value2<br> 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value3<br> 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value4<br> 
    <input type="submit" id="submit-f2" value="Apply"> 
    </form> 
</div>

JS：

$("#select-all").change(function() { 
    $(this).siblings().prop('checked', $(':checkbox').prop("checked")); 
});

ありがとうございます。最大

出典

2016-08-17 Max06270

あなたが代わりにIDの '選択-ALL'のクラスを使用する必要があります。 IDは1つの要素に対してユニークであると考えられています。編集：あなたの入力IDは同じです。それらはクラスでなければなりません。 –

同じIDを使用しないでください。両方の（すべて）チェックボックスを選択します。 idをクラスに変更し、以下のコードを使用してください。

$(".select-all").change(function() { 
    $(this).siblings().prop('checked', $(this).prop("checked")); 
});

最初に小道具をチェックしていました。実際には、クリックされたチェックボックスのプロパティのみをチェックする必要があります。

出典

2016-08-18 00:22:31

ありがとうございました。これは完璧な答えです – Max06270

id属性は、要素の一意のIDを指定しますので、あなたは次のようにクラスを使用する必要があります。このような

<div id="filter1"> 
    <form action='#'> 
     <input type="checkbox" class="select-all" checked>(All)<br> 
     //.... 
    </form> 
</div>

そして

<div id="filter2"> 
    <form action='#'> 
    <input type="checkbox" class="select-all" checked>(All)<br> 
    //... 
    </form> 
</div>

と変更のjQueryコード：

$(document).ready(function() { 
    $("#filter2 .select-all, #filter1 .select-all").change(function() { 
     if($(this).is(':checked')) 
      $(this).siblings().prop('checked',true); 
     else 
      $(this).siblings().prop('checked',false); 
    }) 
})

ORは次のように変更されます：

$(document).ready(function() { 
    $(".select-all").change(function() { 
     $(this).siblings().prop('checked', $(this).prop("checked")); 
    }) 
})

決勝コード：

<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
    </head> 
 
    <body> 
 
<div id="filter1"> 
 
    <form action='#'> 
 
     <input type="checkbox" class="select-all" checked>(All)<br> 
 
     <!-- Should select/unselect only the F1 checkboxes --> 
 
     <input type="checkbox" id="checkbox-f1" checked>F1: Value1<br> 
 
     <input type="checkbox" id="checkbox-f1" checked>F1: Value2<br> 
 
     <input type="checkbox" id="checkbox-f1" checked>F1: Value3<br> 
 
     <input type="checkbox" id="checkbox-f1" checked>F1: Value4<br> 
 
     <input type="submit" id="submit-f1" value="Apply"> 
 
    </form> 
 
</div> 
 
<br> 
 
<div id="filter2"> 
 
    <form action='#'> 
 
    <input type="checkbox" class="select-all" checked>(All)<br> 
 
    <!-- Should select/unselect only the F2 checkboxes --> 
 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value1<br> 
 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value2<br> 
 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value3<br> 
 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value4<br> 
 
    <input type="submit" id="submit-f2" value="Apply"> 
 
    </form> 
 
</div> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script> 
 
$(document).ready(function() { 
 
    $("#filter1 .select-all, #filter2 .select-all").change(function() { 
 
     if($(this).is(':checked')) 
 
      $(this).siblings().prop('checked',true); 
 
     else 
 
      $(this).siblings().prop('checked',false); 
 
    }) 
 
    }) 
 
     </script> 
 
    </body> 
 
</html>

出典

2016-08-18 00:25:56 Ehsan

ありがとう、このソリューションは動作しています。しかし、私はVijendra Kulhadeによって提供されるものに使用するつもりです。 – Max06270

あなたは歓迎です – Ehsan

Jqueryすべてのチェックボックスをオフにする複数のフォーム

答えて

関連する問題