Clever Geek Handbook

Select only one checkbox out of three with the same name

UPDATE:

Now my code looks something like this: (works).

   $(document).ready(function(){
         $("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).attr("checked",false);
$(this).attr("checked",true);
 });


          });

HTML:

     <input type="checkbox" name="swimming" class="chb" />
     <input type="checkbox" name="swimming" class="chb" />
     <input type="checkbox" name="swimming" class="chb" />

I have a questionnaire type form with three checkboxes for each question and I want the user to only be able to select one of the three.

My HTML looks something like this:

Question 1:

             <input type="checkbox" name="ballet" />
             <input type="checkbox" name="ballet" />
             <input type="checkbox" name="ballet" />

Question 2:

             <input type="checkbox" name="swimming" />
             <input type="checkbox" name="swimming" />
             <input type="checkbox" name="swimming" />

But it allows the user to select all the checkboxes for a specific question. And I wish he could only choose one of three. Is there a solution for this?

thank

+3


source to share


5 answers


Demo here

$(':checkbox').on('change',function(){
 var th = $(this), name = th.attr('name'); 
 if(th.is(':checked')){
     $(':checkbox[name="'  + name + '"]').not(th).prop('checked',false);   
  }
});


As per the comment, I am assuming that the user should be able to select one of the first three and 1 of the second three checkboxes. Because the attributes of the name are different. Here is a demo.

 $("input:checkbox").change(function(){
 var group = ":checkbox[name='"+ $(this).attr("name") + "']";
   if($(this).is(':checked')){
     $(group).not($(this)).attr("checked",false);
   }
 });
+14


source


You can try using a div.

 <div id="checkboxGroup">
<input type="checkbox" name="ballet" />
<input type="checkbox" name="ballet" />
<input type="checkbox" name="ballet" />
</div>

$('#checkboxGroup input[type=checkbox]').change(function() {
if (this.checked) {
    $('#checkboxGroup input[type=checkbox]').not(
                        $(this)).prop('checked', false);
    }
});


see fiddle

+6


source


Radio buttons are the way to go. You can also preselect one of the options, if you like, by adding the word "verified" as an attribute inside this input tag.

<input type="radio" name="ballet" value="1" checked />
<input type="radio" name="ballet" value="2" />
<input type="radio" name="ballet" value="3" />
+3


source


This is called an HTML radio button. The radio buttons are grouped together and the concept of a switch is that you can only select one at a time in a group.

The name attribute is the name of the radio button group.

<input type="radio" name="ballet" value="1" />
<input type="radio" name="ballet" value="2" />
<input type="radio" name="ballet" value="3" />

Checkboxes with groups like radio buttons

Note that "x" is a class, but the "name" attribute is a group as you wanted.

$(".x").click( function() {
    var n = $(this).attr('name');
    $("[name=" + n + ']').prop("checked", false);
    $(this).prop("checked", true);
});

<input type="checkbox" name="swimming" class="x" />
             <input type="checkbox" name="swimming" class="x" />
             <input type="checkbox" name="swimming" class="x" />

<br/>

<input type="checkbox" name="diving" class="x" />
             <input type="checkbox" name="diving" class="x" />
             <input type="checkbox" name="diving" class="x" />
+2


source


For checkboxes:

$("input:checkbox").click(function () {
    $("[name="+$(this).prop('name')+"]").prop("checked", false);
    $(this).prop("checked", true);
});

You can use radio stations instead.

Fiddle For Checkboxes

0


source






More articles:


All Articles