各オプショングループから1つのチェックボックスセレクタのみ

Question

重複した質問を申し訳ありません。私はこのトピックに関する多くの質問があることを知ったが、これらは私にとって役に立たない。私はいくつかのグループのチェックボックスを持っています。

<div class="options"> 
    <input class="option" type="checkbox"> 
    <input class="option" type="checkbox"> 
    <input class="option" type="checkbox"> 
</div> 

<div class="options"> 
    <input class="option" type="checkbox"> 
    <input class="option" type="checkbox"> 
    <input class="option" type="checkbox"> 
</div> 

<div class="options"> 
    <input class="option" type="checkbox"> 
    <input class="option" type="checkbox"> 
    <input class="option" type="checkbox"> 
</div> 
... 
... 

各グループから選択できるチェックボックスは1つだけです。私はjQueryを試してみましたが、チェックボックスの個々のグループではないすべてのチェックボックスで機能します。

$('body').on('change','.option', function() { 
     $('.option').not(this).prop('checked', false); 
    }); 

もう一つは、この

$('body').on('change','.option', function() { 
    $(this).parent('.options').find('.option').prop('checked', false); 
    $(this).prop('checked', true); 
    }); 

てみてくださいしかし、誰が私の目的を解決しません。助けてください。

Answer 1

siblings()メソッドを使用してすべての兄弟要素を取得するか、同じ名前のラジオボタンを使用できます。

$('body').on('change', '.option', function() { 
 
    $(this).siblings().prop('checked', false); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="options"> 
 
    <input class="option" type="checkbox"> 
 
    <input class="option" type="checkbox"> 
 
    <input class="option" type="checkbox"> 
 
</div> 
 

 
<div class="options"> 
 
    <input class="option" type="checkbox"> 
 
    <input class="option" type="checkbox"> 
 
    <input class="option" type="checkbox"> 
 
</div> 
 

 
<div class="options"> 
 
    <input class="option" type="checkbox"> 
 
    <input class="option" type="checkbox"> 
 
    <input class="option" type="checkbox"> 
 
</div>

Answer 2

より良いアプローチは、ラジオボタンを使用することで、及びそれらをすべて同じ名前を与えるだろう。

<div class="options"> 
    <input name="myname" class="option" type="radio"> 
    <input name="myname" class="option" type="radio"> 
    <input name="myname" class="option" type="radio"> 
</div> 

Answer 3

$(":checkbox").change(function() { 
    if ($(this).is(":checked")) 
    { 
     $(this).siblings(":checkbox").prop("checked", false); 
    } 
});