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
Post a Comment