同じIDの複数のチェックボックスが1つのみで動作する

Question

私の考えは、チェックボックスをオンにすると、.picpicという名前の各divがフェードアウトします（フィルタリングされたものを除いて）、チェックを外すとチェックが外されます。このjQueryコードは最初のチェックボックスでのみ機能します。あなたのアイデアをありがとう。

チェックボックス

<form> 
    <label> 
     <input type="checkbox" id="selectedv" value="a1"/> a1 </label> 

    <label> 
     <input type="checkbox" id="selectedv" value="a2" /> a2 </label> 

    <label> 
     <input type="checkbox" id="selectedv" value="a3" /> a3 </label> 

    </form> 

jQueryの

チェックボックスは、彼らが戻ってフェードイン時に未チェックのすべての.picpic div要素は、フィルタリングのものを除いてフェードアウトしてチェックされている場合。

if(document.getElementById('selectedv').checked) { 
$('.picpic').not($filteredResults).fadeOut(1000) 
} else { 
    $('.picpic').fadeIn(1000)(); 
} 
}); 

Answer 1

私は欲しかった解決策を得ました。

• IDの代わりに使用されるクラスは、IDが一意であると考えられるためです。チェックボックスがチェックされている場合

• それを濾過もの

• 除くすべてのdivをフェードアウトます。すべてのチェックボックスをオンにすると、すべてのdivが表示されます。

チェックボックス

<form> 
     <label> 
      <input type="checkbox" class="selected v" value="a1"/> a1 </label> 

     <label> 
      <input type="checkbox" class="selected a" value="a2" /> a2 </label> 

     <label> 
      <input type="checkbox" class="selected z" value="a3" /> a3 </label> <br> 

</form> 

jqueryの

if($('input.selected').is(':checked')) { 
     $('.picpic').not($filteredResults).fadeOut(1000) 
     $($filteredResults).fadeIn(1000)() 
     } else { 
      $('.picpic').fadeIn(1000)(); 
    } 

https://jsfiddle.net/01o2pawk/1/

Answer 2

document.getElementByIdだけではありません：そのIDを持つ要素を1つ取得します。 HTML仕様では、任意のIDに対して複数の要素を持つことはできません。

この場合、classまたはnameに切り替えることができます。

Answer 3

1つのテキスト領域を使用して複数の要素をスタイルする場合は、IDではなくクラスを使用してみてください。