How to uncheck all checkboxes on click using jQuery except clicked one

Question

I creating a form, where HTML looks like this:

<div class="frm_opt_container" aria-labelledby="field_60ao4_label" role="group"> <div class="frm_checkbox" id="frm_checkbox_111-0"><label for="field_60ao4-0"><input type="checkbox" name="item_meta[111][]" id="field_60ao4-0" value="Za mało śpię" data-invmsg="Które stwierdzenia dotyczą ciebie is invalid"> Za mało śpię</label></div>
<div class="frm_checkbox" id="frm_checkbox_111-1"><label for="field_60ao4-1"><input type="checkbox" name="item_meta[111][]" id="field_60ao4-1" value="Jem o późnych porach" data-invmsg="Które stwierdzenia dotyczą ciebie is invalid"> Jem o późnych porach</label></div>
<div class="frm_checkbox" id="frm_checkbox_111-2"><label for="field_60ao4-2" class=""><input type="checkbox" name="item_meta[111][]" id="field_60ao4-2" value="Jem dużo soli" data-invmsg="Które stwierdzenia dotyczą ciebie is invalid"> Jem dużo soli</label></div>
<div class="frm_checkbox" id="frm_checkbox_111-3"><label for="field_60ao4-3" class=""><input type="checkbox" name="item_meta[111][]" id="field_60ao4-3" value="Jem słodycze" data-invmsg="Które stwierdzenia dotyczą ciebie is invalid"> Jem słodycze</label></div>
<div class="frm_checkbox" id="frm_checkbox_111-4"><label for="field_60ao4-4"><input type="checkbox" name="item_meta[111][]" id="field_60ao4-4" value="Uwielbiam napoje gazowane" data-invmsg="Które stwierdzenia dotyczą ciebie is invalid"> Uwielbiam napoje gazowane</label></div>
<div class="frm_checkbox" id="frm_checkbox_111-5"><label for="field_60ao4-5" class=""><input type="checkbox" name="item_meta[111][]" id="field_60ao4-5" value="Za mało się ruszam" data-invmsg="Które stwierdzenia dotyczą ciebie is invalid"> Za mało się ruszam</label></div>
<div class="frm_checkbox" id="frm_checkbox_111-6"><label for="field_60ao4-6" class=""><input type="checkbox" name="item_meta[111][]" id="field_60ao4-6" value="Nie lubię ćwiczyć" data-invmsg="Które stwierdzenia dotyczą ciebie is invalid"> Nie lubię ćwiczyć</label></div>
<div class="frm_checkbox" id="frm_checkbox_111-7"><label for="field_60ao4-7" class=""><input type="checkbox" name="item_meta[111][]" id="field_60ao4-7" value="Nie mam czasu na treningi" data-invmsg="Które stwierdzenia dotyczą ciebie is invalid"> Nie mam czasu na treningi</label></div>
<div class="frm_checkbox" id="frm_checkbox_111-8"><label for="field_60ao4-8" class="checkedlabel"><input type="checkbox" name="item_meta[111][]" id="field_60ao4-8" value="Żadne z powyższych" data-invmsg="Które stwierdzenia dotyczą ciebie is invalid"> Żadne z powyższych</label></div>
</div>

I need to add jQuery to last checkbox, so when someone click it, it will uncheck all except last checkbox.

How can I do this using jQuery? Tried this but without success:

$('#field_60ao4-8').click(function(){     
  $('#field_60ao4-8').attr('checked', false);
  $(this).attr('checked', true);          
   });

and:

    $(document).on('click','#field_60ao4-8', function(){     
      $('#field_60ao4-8').attr('checked', false);
      $(this).attr('checked', true);          
});

Answer 1

If I figured out what you want, this code below is fine for you:

 $(document).ready(function() { $('#field_60ao4-8').change(function() { if (this.checked) { $("div div input:not(:last)").prop("checked", false); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="frm_opt_container" aria-labelledby="field_60ao4_label" role="group"> <div class="frm_checkbox" id="frm_checkbox_111-0"><label for="field_60ao4-0"><input type="checkbox" name="item_meta[111][]" id="field_60ao4-0" value="Za mało śpię" data-invmsg="Które stwierdzenia dotyczą ciebie is invalid"> Za mało śpię</label></div> <div class="frm_checkbox" id="frm_checkbox_111-1"><label for="field_60ao4-1"><input type="checkbox" name="item_meta[111][]" id="field_60ao4-1" value="Jem o późnych porach" data-invmsg="Które stwierdzenia dotyczą ciebie is invalid"> Jem o późnych porach</label></div> <div class="frm_checkbox" id="frm_checkbox_111-2"><label for="field_60ao4-2" class=""><input type="checkbox" name="item_meta[111][]" id="field_60ao4-2" value="Jem dużo soli" data-invmsg="Które stwierdzenia dotyczą ciebie is invalid"> Jem dużo soli</label></div> <div class="frm_checkbox" id="frm_checkbox_111-3"><label for="field_60ao4-3" class=""><input type="checkbox" name="item_meta[111][]" id="field_60ao4-3" value="Jem słodycze" data-invmsg="Które stwierdzenia dotyczą ciebie is invalid"> Jem słodycze</label></div> <div class="frm_checkbox" id="frm_checkbox_111-4"><label for="field_60ao4-4"><input type="checkbox" name="item_meta[111][]" id="field_60ao4-4" value="Uwielbiam napoje gazowane" data-invmsg="Które stwierdzenia dotyczą ciebie is invalid"> Uwielbiam napoje gazowane</label></div> <div class="frm_checkbox" id="frm_checkbox_111-5"><label for="field_60ao4-5" class=""><input type="checkbox" name="item_meta[111][]" id="field_60ao4-5" value="Za mało się ruszam" data-invmsg="Które stwierdzenia dotyczą ciebie is invalid"> Za mało się ruszam</label></div> <div class="frm_checkbox" id="frm_checkbox_111-6"><label for="field_60ao4-6" class=""><input type="checkbox" name="item_meta[111][]" id="field_60ao4-6" value="Nie lubię ćwiczyć" data-invmsg="Które stwierdzenia dotyczą ciebie is invalid"> Nie lubię ćwiczyć</label></div> <div class="frm_checkbox" id="frm_checkbox_111-7"><label for="field_60ao4-7" class=""><input type="checkbox" name="item_meta[111][]" id="field_60ao4-7" value="Nie mam czasu na treningi" data-invmsg="Które stwierdzenia dotyczą ciebie is invalid"> Nie mam czasu na treningi</label></div> <div class="frm_checkbox" id="frm_checkbox_111-8"><label for="field_60ao4-8" class="checkedlabel"><input type="checkbox" name="item_meta[111][]" id="field_60ao4-8" value="Żadne z powyższych" data-invmsg="Które stwierdzenia dotyczą ciebie is invalid"> Żadne z powyższych</label></div> </div>

basically it just captures the change event of the last checkbox, and when is checked, it selects all child inputs of the child divs of the parent div without the last input element and set checked property of the selection to false .