Jquery - Checkboxes, when one is checked uncheck all others with same class

GeorgeRichardson
May 28, 2024
242 views
0 votes
2 Answers

I have many checkboxes each having the same ID’s and Classes.

The input’s themselves have the class ‘el-checkbox__original’.

<!-- when this is clicked the below divs which have checkboxes appear -->
<div id="bap-service-13" class="bpa-front-si-card">
<div class="bpa-front-si-card__row">
</div>
</div>

<div id="treatment-option-ext" class="bpa-service-extra__item">
  <div class="bpa-sei__header">
    <div class="bpa-sei__left">
      <div class="bpa-sei__left-checkbox">
        <label class="el-checkbox bpa-form-label bpa-custom-checkbox--is-label bpa-front-form-control--checkbox">
          <span class="el-checkbox__input">
            <span class="el-checkbox__inner"></span>
            <input type="checkbox" aria-hidden="false" class="el-checkbox__original" value="">
          </span>
        </label>
      </div>
      <div class="bpa-sei__left-body">
        <div class="bpa-se--heading">1.1ml</div>
        <div class="bpa-se--options">
          <div class="bpa-se-o__item">£0.00</div>
        </div>
      </div>
    </div>
    <div class="bpa-sei__right">
    </div>
  </div>
</div>

<div id="treatment-option-ext" class="bpa-service-extra__item">
  <div class="bpa-sei__header">
    <div class="bpa-sei__left">
      <div class="bpa-sei__left-checkbox">
        <label class="el-checkbox bpa-form-label bpa-custom-checkbox--is-label bpa-front-form-control--checkbox">
          <span class="el-checkbox__input">
            <span class="el-checkbox__inner"></span>
            <input type="checkbox" aria-hidden="false" class="el-checkbox__original" value="">
          </span>
        </label>
      </div>
      <div class="bpa-sei__left-body">
        <div class="bpa-se--heading">1.1ml</div>
        <div class="bpa-se--options">
          <div class="bpa-se-o__item">£0.00</div>
        </div>
      </div>
    </div>
    <div class="bpa-sei__right">
    </div>
  </div>
</div>

<div id="treatment-option-ext" class="bpa-service-extra__item">
  <div class="bpa-sei__header">
    <div class="bpa-sei__left">
      <div class="bpa-sei__left-checkbox">
        <label class="el-checkbox bpa-form-label bpa-custom-checkbox--is-label bpa-front-form-control--checkbox">
          <span class="el-checkbox__input">
            <span class="el-checkbox__inner"></span>
            <input type="checkbox" aria-hidden="false" class="el-checkbox__original" value="">
          </span>
        </label>
      </div>
      <div class="bpa-sei__left-body">
        <div class="bpa-se--heading">1.1ml</div>
        <div class="bpa-se--options">
          <div class="bpa-se-o__item">£0.00</div>
        </div>
      </div>
    </div>
    <div class="bpa-sei__right">
    </div>
  </div>
</div>

When checked, class is-checked is added to both the span tag and label tag

<div id="treatment-option-ext" class="bpa-service-extra__item">
  <div class="bpa-sei__header">
    <div class="bpa-sei__left">
      <div class="bpa-sei__left-checkbox">
        <label class="el-checkbox bpa-form-label bpa-custom-checkbox--is-label bpa-front-form-control--checkbox is-checked">
          <span class="el-checkbox__input is-checked">
            <span class="el-checkbox__inner"></span>
            <input type="checkbox" aria-hidden="false" class="el-checkbox__original" value="">
          </span>
        </label>
      </div>
      <div class="bpa-sei__left-body">
        <div class="bpa-se--heading">1.1ml</div>
        <div class="bpa-se--options">
          <div class="bpa-se-o__item">£0.00</div>
        </div>
      </div>
    </div>
    <div class="bpa-sei__right">
    </div>
  </div>
</div>

How can I make it so that if one the checkboxes is clicked (el-checkbox__original), any of the other checkboxes are unticked, ultimately so that only one checkbox can be checked.

I tried with JQuery but evidently, it does not remove the is-checked from any of the other checkboxes when one of them is clicked

 jQuery.noConflict();
    setTimeout(function(){
        jQuery(document).ready(function($) {
            console.log("page loaded")
          
                $(".bpa-front-si-card").on('click', function(){
                    console.log("service clicked")  
                });
          
                <!-- after clicking bpa-front-si-card - line above, checkboxes with class el-checkbox__original appear and should listen for checkboxes to be clicked -->
                $(".el-checkbox__original").on('click', function(){
                      $('input.el-checkbox__original').not(this).prop('checked', false).closest("label").removeClass('is-checked').closest("span").removeClass('is-checked');  
                }) 
          
        })}, 6000);

Tags: javascript jquery

Answers

- iConnor
- May 28, 2024 at 10:19 pm
- 0 votes
0
UPDATED (based on OP comment updates)

If you want to deselect all bar the active one, you could uncheck them all then re-check the active on, its a simple way i guess
```
$(".el-checkbox__original").on('change', function(){
   
    // De-select all inputs of type
    $('span.el-checkbox__input, label.el-checkbox').removeClass('is-checked').find('input').prop('checked', false);

    // Keep active select checked
    $(this).closest('span').addClass('is-checked')
           .closest('label').addClass('is-checked')
           .find('input').prop('checked', true)
});
```
Tried & Tested @ https://jsfiddle.net/cqgfesdb/2/

Just add it inside whatever event creates these elements and you’ll be set

PUT THIS CODE inside your .bpa-front-si-card.'click' event if the elements targeted aren’t created untul that event is fired.

or acccording to the documentation you could do something like this to watch for live elements
```
$("body").on('change', ".el-checkbox__original", function(){
     // REMOVE CLASSES * EDIT ATTRIBUTES
});
```
Login or Signup to reply.

Using a delegated event listener solves the problem:

$("body").on("change",".el-checkbox__original",function(){
 $(".el-checkbox__original").each((i,cb)=>{if(cb!=this)cb.checked=false})
})

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<div id="treatment-option-ext" class="bpa-service-extra__item">
  <div class="bpa-sei__header">
<div class="bpa-sei__left">
  <div class="bpa-sei__left-checkbox">
    <label class="el-checkbox bpa-form-label bpa-custom-checkbox--is-label bpa-front-form-control--checkbox">
      <span class="el-checkbox__input">
        <span class="el-checkbox__inner"></span>
        <input type="checkbox" aria-hidden="false" class="el-checkbox__original" value="">
      </span>
    </label>
  </div>
  <div class="bpa-sei__left-body">
    <div class="bpa-se--heading">1.1ml</div>
    <div class="bpa-se--options">
      <div class="bpa-se-o__item">£0.00</div>
    </div>
  </div>
</div>
<div class="bpa-sei__right">
</div>
  </div>
</div>

<div id="treatment-option-ext" class="bpa-service-extra__item">
  <div class="bpa-sei__header">
<div class="bpa-sei__left">
  <div class="bpa-sei__left-checkbox">
    <label class="el-checkbox bpa-form-label bpa-custom-checkbox--is-label bpa-front-form-control--checkbox">
      <span class="el-checkbox__input">
        <span class="el-checkbox__inner"></span>
        <input type="checkbox" aria-hidden="false" class="el-checkbox__original" value="">
      </span>
    </label>
  </div>
  <div class="bpa-sei__left-body">
    <div class="bpa-se--heading">1.1ml</div>
    <div class="bpa-se--options">
      <div class="bpa-se-o__item">£0.00</div>
    </div>
  </div>
</div>
<div class="bpa-sei__right">
</div>
  </div>
</div>

<div id="treatment-option-ext" class="bpa-service-extra__item">
  <div class="bpa-sei__header">
<div class="bpa-sei__left">
  <div class="bpa-sei__left-checkbox">
    <label class="el-checkbox bpa-form-label bpa-custom-checkbox--is-label bpa-front-form-control--checkbox">
      <span class="el-checkbox__input">
        <span class="el-checkbox__inner"></span>
        <input type="checkbox" aria-hidden="false" class="el-checkbox__original" value="">
      </span>
    </label>
  </div>
  <div class="bpa-sei__left-body">
    <div class="bpa-se--heading">1.1ml</div>
    <div class="bpa-se--options">
      <div class="bpa-se-o__item">£0.00</div>
    </div>
  </div>
</div>
<div class="bpa-sei__right">
</div>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – Checkboxes, when one is checked uncheck all others with same class

Answers