Select only one checkbox in group

Question

I need in html select only one checkbox in a group. I find my example. But I can't realize it. It doesn't works. Here is my example: example

Here is my code HTML:

    <div>
            <li>
                <div class="radio">
                    <label>
                    <input type="checkbox" name="mobil[1][]" id="optionsRadios1" value="1" checked class="radi">
                    Сотовый телефон имеется
                    </label>
                </div>
            </li>
            <li>
                <div class="radio">
                    <label>
                    <input type="checkbox" name="mobil[1][]" id="optionsRadios2" value="0" class="radi">
                    Сотовый телефон не имеется
                    </label>
                </div>
            </li>
    <div>

And code jquery:

$("input:checkbox").on('click', function() {
        // in the handler, 'this' refers to the box clicked on
        var $box = $(this);
        if ($box.is(":checked")) {
        // the name of the box is retrieved using the .attr() method
        // as it is assumed and expected to be immutable
        var group = "input:checkbox[name='" + $box.attr("name") + "']";
        // the checked state of the group/box on the other hand will change
        // and the current value is retrieved using .prop() method
        $(group).prop("checked", false);
        $box.prop("checked", true);
   } 
   else {
        $box.prop("checked", false);
   }
});

Any help plz.

Note that `li` should be a child of `ul` or an `ol` element! — Ram, Apr 01 '15 at 11:50
Is the intention to allow 0 or 1 checkboxes to be checked or unchecked? Or is it to disable all the others once a single value has been checked? — ste-fu, Apr 01 '15 at 12:16

ste-fu · Answer 1 · 2015-04-01T12:21:57.463

4

Radio Buttons are designed for exactly that functionality

Have a look at http://www.w3schools.com/html/html_forms.asp

Taken from the link

<form>
    <input type="radio" name="sex" value="male" checked>Male
    <br>
    <input type="radio" name="sex" value="female">Female
</form>

As long as they share the same name attribute you will see the desired behaviour.

If you want to only allow a single checkbox to be checked, but to allow 0 values, and for the user to uncheck one value without checking another then you could do it like this:

 $("input:checkbox").on('click', function() {

    var $box = $(this);
    if ($box.is(":checked")) 
    {

    // set all elements matching the name to unchecked        
    $("input:checkbox[name='mobil[1][]']").prop("checked", false)

    // set the orginally checked box back to 'checked'       
    $box.prop("checked", true);
   } 
   else 
   {
      $box.prop("checked", false);
   }
});

edited Apr 01 '15 at 12:21

answered Apr 01 '15 at 11:49

ste-fu

6,879
3
27
46

In radiobuttons you can't uncheck. You should make decision. – Шыназ Алиш Apr 01 '15 at 11:50
2

@ШыназАлиш How about adding a radio input with an _"uncheck"_ value to the group? – Ram Apr 01 '15 at 11:51
Precisely. Radio buttons are designed to submit one and only one value — if you want to provide the option to the user where no response is desired, provide a "none" or "N.A." option. – Terry Apr 01 '15 at 11:57

score 4 · Answer 2 · answered Apr 01 '15 at 12:06

$(function(){
    
  $("input[name='fruit[]']").change(function(e) {
   if($('input[name="fruit[]"]:checked').length==1) {
    $("input[name='fruit[]']:not(:checked)").attr("disabled", true);
   } else {
    $("input[name='fruit[]']:not(:checked)").attr("disabled", false);
   }
  });  
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<html>
<head>

</head>
<body>
 <form>  
  
    <input type="checkbox" name="fruit[]" value="orange"> Orange
       <input type="checkbox" name="fruit[]" value="apple"> Apple
       <input type="checkbox" name="fruit[]" value="grapefruit"> Grapefruit
       <input type="checkbox" name="fruit[]" value="banana"> Banana
       <input type="checkbox" name="fruit[]" value="watermelon"> Watermelon
    <input type="checkbox" name="fruit[]" value="watermelon"> Papaya 
 </form>
 
</body>
</html>

It works for one group of checkboxes, could your improve your answer for several group of chekboxes. — Шыназ Алиш, Apr 01 '15 at 12:18

George · Accepted Answer · 2015-04-01T12:26:57.470

3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function() {
    $("input:checkbox").on('click', function() {
      // in the handler, 'this' refers to the box clicked on
      var $box = $(this);
      if ($box.is(":checked")) {
        // the name of the box is retrieved using the .attr() method
        // as it is assumed and expected to be immutable
        var group = "input:checkbox[name='" + $box.attr("name") + "']";
        // the checked state of the group/box on the other hand will change
        // and the current value is retrieved using .prop() method
        $(group).prop("checked", false);
        $box.prop("checked", true);
      } else {
        $box.prop("checked", false);
      }
    });
  });
</script>
<form>
  <div>
    <li>
      <div class="radio">
        <label>
          <input type="checkbox" name="mobil[1][]" id="optionsRadios1" value="1" checked class="radi">Сотовый телефон имеется
        </label>
      </div>
    </li>
    <li>
      <div class="radio">
        <label>
          <input type="checkbox" name="mobil[1][]" id="optionsRadios2" value="0" class="radi">Сотовый телефон не имеется
        </label>
      </div>
    </li>
    <div>
</form>

Your provided sample works here.

edited Apr 01 '15 at 12:26

answered Apr 01 '15 at 11:51

George

4,323
3
30
33

I have wrapped the html content in a form tag and it still works for me. let me know if it isnt working for you. – George Apr 01 '15 at 11:59
I have tested the code snippet it Chrome, Firefox, and IE11. It appears to be working in all of those cases. Can you provide a little more info about what you mean when you say it isnt working for you? – George Apr 01 '15 at 12:09
I copy your code, and paste to my file, and I my browser(Chrome) it doesn't works( – Шыназ Алиш Apr 01 '15 at 12:22
I have moved the logic into a document ready function and moved the script into a local script block for copy paste simplicity. If it still is not working I will need you to provide a little bit more information about any errors you are seeing. – George Apr 01 '15 at 12:27
Sorry that i write your again, but one question. How i can get with POST in my php file this: . – Шыназ Алиш Apr 02 '15 at 07:45

gvee · Answer 4 · 2015-04-01T11:52:52.060

1

Use radio buttons instead of checkboxes - this is exactly what they're designed to do!

$("#uncheck").click(function() {
  $("input[name=onlyselectone]").prop("checked", false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="radio" name="onlyselectone" value="1"/>1
<br />
<input type="radio" name="onlyselectone" value="2"/>2
<br />
<input type="radio" name="onlyselectone" value="3"/>3
<br />
<input type="button" id="uncheck" value="Uncheck" />

Added a little snippet of JQuery to "uncheck" the values, if required.

edited Apr 01 '15 at 11:52

answered Apr 01 '15 at 11:50

gvee

16,732
35
50

Could i in your example check one of the checkboxes, and after uncheck all, and don't make decision? – Шыназ Алиш Apr 01 '15 at 11:52
@ШыназАлиш added a little JQuery to achieve that functionality. – gvee Apr 01 '15 at 11:53
i should make it in checkboxes) – Шыназ Алиш Apr 01 '15 at 11:55

Select only one checkbox in group

4 Answers4

Linked