jQuery。 （確認した）以外のすべてのチェックボックスをオフにする方法

Question

私は、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> 

をそして今、私は次のしたい：私はすべてのチェックボックスをクリックした場合 - チェックボックスがチェックされ、他のする必要がありますチェックボックスをオフにする必要があります。どうしたらいいですか？

Answer 1

ボタンradioボタンを使用し、名前属性でグループ化できます。あなたはcheckboxesでそれをしなければならないなら、あなたは、それを動的に生成されたあなたはあなたができる、あなたは、静的な親でイベントを委任することができますonを必要とするHTML用

Live Demo

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

をこの方法を行うことができます静的な親を知らない文書を使用する。

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

ドキュメントは、既知の場合は静的な親で置き換えることができます。例えば動的に生成含むdiv要素にid parentdivを持っているならば、あなたは

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

編集

利用prop代わりの性質checked、selected、またはマニュアルどおりdisabledためattrを持つことができます。

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

Answer 2

ここで私が起こったビットがオンで仕事ができることです。

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

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

$("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>