How I disable or uncheck all checkboxes, if one checked in array?

Question

I have to use group of checkboxes in my project.

This is how my HTML look like:

<label class="checkbox-inline">
  <input type="checkbox" name="hairColor" value="1"> hairColor-1
</label>
<label class="checkbox-inline">
  <input type="checkbox" name="hairColor" value="2"> hairColor-2
</label>
<label class="checkbox-inline">
  <input type="checkbox" name="hairColor" value="3"> hairColor-3
</label>        
<label class="checkbox-inline">
  <input type="checkbox" name="hairColor" value="4" class="any"> any
</label>

<br> 

<label class="checkbox-inline">
  <input type="checkbox" name="eyeColor" value="1"> eyeColor-1
</label>
<label class="checkbox-inline">
  <input type="checkbox" name="eyeColor" value="2"> eyeColor-2
</label>
<label class="checkbox-inline">
  <input type="checkbox" name="eyeColor" value="3"> eyeColor-3
</label>        
<label class="checkbox-inline">
  <input type="checkbox" name="eyeColor" value="4" class="any"> any
</label>

Using this checkboxes, users can select their preferred selection. But if they select the checkbox text with "any" I need to uncheck all other selection already made within a group. And also if they check that checkbox other chechboxes should not be check.

This is how I tried it using Jquery.

$( "body" ).on( "change", ".checkbox-inline > input[type=checkbox]", function() {
    if ($(this).hasClass("any")) { //Any checkbox tick
        if ($(this).prop("checked")) { //User checked any
            //Other checkboxes are unchecked
            $(".checkbox-inline > input[type=checkbox][name=" + $(this).attr("name") + "]:not(.any)").prop("checked", false)
        }
    } else { //Other checkbox tick
        if ($(this).prop("checked")) {//User checked another checkbox
            //Any checkbox is unchecked
            $("[name=" + $(this).attr("name") + "].any").prop("checked", false);
        }
    }
});

It's working for me. But my problem is when I change name value to array type like hairColor[] then my code is not working.

Sorry for typo mistake... This is working fiddle with `name` in `array` type - http://jsfiddle.net/6D9kS/174/ — TNK, Jun 09 '15 at 12:33

score 2 · Answer 1 · answered Jun 09 '15 at 13:13

I like AmmarCSE's answer, I have upvoted it, but I believe there is certainly room for improvement. You might have other characters in your name attribute and you might have more instances of a character. As a result, I believe a simple function should solve the issue, like this:

function escapeSpecialChars(input) {
     return input.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}

and then you apply it, like this:

$( "body" ).on( "change", ".checkbox-inline > input[type=checkbox]", function() {
    var escapedSelector = escapeSpecialChars($(this).attr("name"));
    if ($(this).hasClass("any")) { //Any checkbox tick
        if ($(this).prop("checked")) { //User checked any
            //Other checkboxes are unchecked
            $(".checkbox-inline > input[type=checkbox][name=" + escapedSelector + "]:not(.any)").prop("checked", false)
        }
    } else { //Other checkbox tick
        if ($(this).prop("checked")) {//User checked another checkbox
            //Any checkbox is unchecked
            $("[name=" + escapedSelector + "].any").prop("checked", false);
        }
    }
});

Working fiddle.

score 1 · Accepted Answer · edited May 23 '17 at 12:30

Since your name attributes contain [], you either need to escape them or switch your single/double quote usage like

$('[name="' + $(this).attr("name") + '"].any')

$("body").on("change", ".checkbox-inline > input[type=checkbox]", function() {
  if ($(this).hasClass("any")) { //Any checkbox tick
    if ($(this).prop("checked")) { //User checked any
      //Other checkboxes are unchecked
      $('.checkbox-inline > input[type=checkbox][name="' + $(this).attr("name") + '"]:not(.any)').prop("checked", false)
    }
  } else { //Other checkbox tick
    if ($(this).prop("checked")) { //User checked another checkbox
      //Any checkbox is unchecked
      $('[name="' + $(this).attr("name") + '"].any').prop("checked", false);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label class="checkbox-inline">
  <input type="checkbox" name="hairColor[]" value="1">hairColor-1
</label>
<label class="checkbox-inline">
  <input type="checkbox" name="hairColor[]" value="2">hairColor-2
</label>
<label class="checkbox-inline">
  <input type="checkbox" name="hairColor[]" value="3">hairColor-3
</label>
<label class="checkbox-inline">
  <input type="checkbox" name="hairColor[]" value="4" class="any">any
</label>

<br>

<label class="checkbox-inline">
  <input type="checkbox" name="eyeColor[]" value="1">eyeColor-1
</label>
<label class="checkbox-inline">
  <input type="checkbox" name="eyeColor[]" value="2">eyeColor-2
</label>
<label class="checkbox-inline">
  <input type="checkbox" name="eyeColor[]" value="3">eyeColor-3
</label>
<label class="checkbox-inline">
  <input type="checkbox" name="eyeColor[]" value="4" class="any">any
</label>

See jQuery selector for inputs with square brackets in the name attribute

How I disable or uncheck all checkboxes, if one checked in array?

2 Answers2

Linked