Question

I have some HTML like this:

<div id="SomeID">
 <div class="Wrapper">
    <input type="checkbox" class="SomeCheckboxClass">
    <input type="checkbox" class="SomeCheckboxClass">
    <input type="checkbox" class="SomeCheckboxClass">
 </div>

 <div class="Wrapper">
    <input type="checkbox" class="SomeCheckboxClass">
    <input type="checkbox" class="SomeCheckboxClass">
    <input type="checkbox" class="SomeCheckboxClass">
 </div>
</div>

When the user clicks on a checkbox, I want to clear all the neighboring checkboxes in the parent Wrapper div. Basically, I only want one SomeCheckboxClass per Wrapper selected at any given time. For now, I wrote this:

$('#SomeID').on({

   change: function () {

        if ($(this).attr('checked') === 'checked') {

        var TheIndex = $(this).index();

        $(this).parent().find('.SomeCheckboxClass').each(function () {

            if ($(this).index() !== TheIndex) {
                $(this).attr('checked', false);
            }
        });
      }
   }
}, '.SomeCheckboxClass');

Is there an easier way to do it? After spending some time doing it I’m thinking there’s got to be an easier way. Note that the HTML is generated at runtime. Let me know if there’s easierr/better/faster.

Thanks.

Answer 1

You can use siblings():

var $this = $(this);
if ($this.is(":checked")) {
    $this.siblings().prop("checked", false);
}