Upon clicking a checkbox, uncheck other checkboxes and trigger change or click event on the on one that was previously checked

Question

I have a group of checkboxes for a filtering functionality that triggers some function upon clicking them. I need to implement one checkbox checked at a time which is not the problem but I need to trigger a click or change event on previously checked checkbox as changing the "prop" did not fire any event.

 <input type="checkbox" data-filter="threebed" class="bedroomsCheck" name="bedrooms" value="three">
 <input type="checkbox" data-filter="fourbed" class="bedroomsCheck" name="bedrooms" value="four">
 <input type="checkbox" data-filter="fivebed" class="bedroomsCheck" name="bedrooms" value="five">

My approach which did not give appropriate output on filtering functionality.

  $(document).on('click', '.bedroomsCheck', function() { 

      $('.bedroomsCheck').not(this).prop('checked', false);
      $('.bedroomsCheck').each( function (){
            if(!(this) && is(':checked')){

               //how do I target the one that meets condition?

             }
      });
 });

 //This didn't work either
 $('.hometypeCheck').not(this).prop('checked', false).trigger('change');   //click, change

Answer 1

Try like this:

 var clicked; $('.bedroomsCheck').on('click', function() { clicked = $(this); if ($(this).is(':checked')) { $('.bedroomsCheck:checked').not($(this)).each(function() { $(this).prop('checked', false); $(this).trigger('change'); }); }; }); $('.bedroomsCheck').on('change', function() { if (.clicked.is($(this))) { //do something useful here console.log($(this);val() + ' changed'); }; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" data-filter="threebed" class="bedroomsCheck" name="bedrooms" value="three"> <input type="checkbox" data-filter="fourbed" class="bedroomsCheck" name="bedrooms" value="four"> <input type="checkbox" data-filter="fivebed" class="bedroomsCheck" name="bedrooms" value="five">

1. In the click event, remember which input was last clicked ( clicked variable).
2. If the clicked input becomes checked, then change all the other checked inputs to unchecked and trigger their change event (these can be selected using $('.bedroomsCheck:checked').not($(this)) )
3. In the change event, check whether the changing element is clicked and perform useful actions if not.

Answer 2

This isn't terribly clever, but set a change handler on each checkbox and init a variable to keep track of the last checked box. It starts out undefined . When a checkbox is checked, run through all of the checkboxes and uncheck them. Then call the trigger function or throw an event or whatnot for the last checked box (the first time, this will be undefined since nobody was checked last). Mark the current checkbox as checked, then stash a reference to it in the last variable to get ready for the next time around.

 const checkboxes = document.querySelectorAll("input"); checkboxes.forEach(checkbox => checkbox.addEventListener("change", checked)); let last; function checked(event) { checkboxes.forEach(checkbox => checkbox.checked = false); trigger(last); event.target.checked = true; last = event.target; } function trigger(el) { if (el) console.log(el); }

 <input type="checkbox" data-filter="threebed" class="bedroomsCheck" name="bedrooms" value="three"> <input type="checkbox" data-filter="fourbed" class="bedroomsCheck" name="bedrooms" value="four"> <input type="checkbox" data-filter="fivebed" class="bedroomsCheck" name="bedrooms" value="five">