Nur eine Checkbox auswählbar von jeder Optionsgruppe

Question

Sorry für doppelte Frage. Ich fand, dass es viele Fragen zu diesem Thema gibt, aber diese sind mir nicht hilfreich. Ich habe mehrere Kontrollkästchen.

<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> 
... 
... 

Ich möchte nur eine Checkbox kann von jeder Gruppe ausgewählt werden. Ich habe mit jQuery versucht, aber es funktioniert für jedes Kontrollkästchen nicht für einzelne Gruppe von Kontrollkästchen.

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

versuchen andere mit diesem

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

Aber niemand meinen Zweck lösen. Bitte helfen Sie.

Answer 1

Verwenden Sie siblings() Methode, um alle gleichgeordneten Elemente oder Sie können Radio-Button mit dem gleichen Namen verwenden.

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

ein besserer Ansatz wäre, Radio-Buttons zu verwenden, und geben ihnen die alle denselben Namen.

<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); 
    } 
});