javascript - How to uncheck all checkboxes, if one checkbox checked? -


i have set of checkboxes, this:

<label class="checkbox-inline">   <input type="checkbox" id="" value="1"> information </label> <label class="checkbox-inline">   <input type="checkbox" id="" value="2"> information </label> <label class="checkbox-inline">   <input type="checkbox" id="" value="3"> information </label>         <label class="checkbox-inline">   <input type="checkbox" id="" value="4"> </label> 

using these checkboxes, users can make make selection. if user selects "any" checkbox need deselect other selection.

i tried this, doesn't work me.

$('.checkbox-inline').click(function(){       $("input[type='checkbox']").attr('checked', false);       $(this).attr('checked', true); }) 

can tell me how can in jquery?

note: using dynamically generated html checkboxes.

define id checkbox, this:

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

i suggest because not idea use fact fourth. if add checkbox in future before it, no longer fourth.

    //we use .on tackle dynamic nature of html     $( "body" ).on( "change", ".checkbox-inline > input[type=checkbox]", function() {         if ($(this).attr("id") === "any-checkbox") { //any checkbox tick             if ($(this).prop("checked")) { //user checked                 //other checkboxes unchecked                 $(".checkbox-inline > input[type=checkbox]:not(#any-checkbox)").prop("checked", false)             }         } else { //other checkbox tick             if ($(this).prop("checked")) {//user checked checkbox                 //any checkbox unchecked                 $("#any-checkbox").prop("checked", false);             }         }     }); 

edit: per comment, have solved issue multiple groups, this:

<label class="checkbox-inline">   <input type="checkbox" id="" name="haircolor" value="1"> information </label> <label class="checkbox-inline">   <input type="checkbox" id="" name="haircolor" value="2"> information </label> <label class="checkbox-inline">   <input type="checkbox" id="" name="haircolor" value="3"> information </label>         <label class="checkbox-inline">   <input type="checkbox" id="haircolor" name="haircolor" value="4" class="any"> </label>    <br>  <label class="checkbox-inline">   <input type="checkbox" id="" name="eyecolor" value="1"> eyecolor </label> <label class="checkbox-inline">   <input type="checkbox" id="" name="eyecolor" value="2"> eyecolor </label> <label class="checkbox-inline">   <input type="checkbox" id="" name="eyecolor" value="3"> eyecolor </label>         <label class="checkbox-inline">   <input type="checkbox" id="eyecolor" name="eyecolor" class="any" value="4"> </label>  //we use .on tackle dynamic nature of html $( "body" ).on( "change", ".checkbox-inline > input[type=checkbox]", function() {     if ($(this).hasclass("any")) { //any checkbox tick         if ($(this).prop("checked")) { //user checked             //other checkboxes 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 checkbox             //any checkbox unchecked             $("[name=" + $(this).attr("name") + "].any").prop("checked", false);         }     } }); 

Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -