web-dev-qa-db-ja.com

jQuery。 1つを除くすべてのチェックボックスをオフにする方法（チェックされた）

私はhtmlアイテムを持っています、4つの例：

<div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
</div>

そして今、私は次のことを望みます：チェックボックスをクリックした場合-チェックボックスをオンにし、他のチェックボックスをオフにする必要があります。どうすればできますか？

jquerycheckboxuncheck
17
Andrew

radioボタンを使用して、名前属性でグループ化できます。 checkboxesでそれを行う必要がある場合は、この方法で行うことができます。

ライブデモ

$('.foo').click(function(){     
      $('.foo').attr('checked', false);
      $(this).attr('checked', true);          
});

動的に生成されたhtmlの場合、静的な親でイベントを委任できる on が必要です。ドキュメントを使用できます。静的な親がわかりません。

$(document).on('click','.foo', function(){     
      $('.foo').attr('checked', false);
      $(this).attr('checked', true);          
});

ドキュメントがわかっている場合は、静的な親に置き換えることができます。例えばdivに動的に生成されたidparentdivが含まれている場合は、

`$('#parentdiv').on('click','.foo', function(){`

編集

プロパティprop、attr、またはにcheckedの代わりにselectedを使用しますドキュメントに従ってdisabled。

JQuery 1.6以降、.attr（）メソッドは、設定されていない属性に対して未定義を返します。フォーム要素のチェック状態、選択状態、無効状態などのDOMプロパティを取得して変更するには、.prop（）メソッドを使用します。

31
Adil

別の解決策

$('.foo').click(function(){     
      $('.foo').not(this).attr('checked', false);      
});
6
Joyal

jQuery V：1.6 = <

$( ".foo" ).change(function() {
    $('.foo').not(this).prop('checked', false);
});
1
Sadee

多分これはあなたを助けるでしょう：

.siblings("input[type='checkbox']").attr("checked", true);

クリックされたものを除くすべてのチェックボックスが選択されます。

$("input[type=checkbox]").on("click", function() {

  if ($(this).val() == "none") {
    
    $(this).siblings("input[type=checkbox]").attr('checked', false);
    
  } else {
    
    $(this).siblings("input[value=none]").attr('checked', false);

  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

  <input type="checkbox" id="worker-soft-eaglesoft" checked><label for="worker-soft-eaglesoft">&nbsp;Eaglesoft</label><br>
  <input type="checkbox" id="worker-soft-dentrix"><label for="worker-soft-dentrix">&nbsp;Dentrix</label><br>
  <input type="checkbox" id="worker-soft-softDent"><label for="worker-soft-softDent">&nbsp;Soft-Dent</label><br>
  <input type="checkbox" id="worker-soft-denticon"><label for="worker-soft-denticon">&nbsp;Denticon</label><br>
  <input type="checkbox" id="worker-soft-other"><label for="worker-soft-other">&nbsp;Other</label><br>

  <input type="checkbox" id="worker-soft-none" value="none">
  <label for="worker-soft-none">&nbsp;No Software Experience - Paper Records Only</label><br>
</div>
1
Beefjeff