Checked a checkbox based on another checkbox if checked

Question

I have some checkboxes generating through a foreach loop. All I want, by checking one checkbox another checkbox will be checked. I have already tried something like this,

This is the foreach block where the checkboxes are generating.

@foreach($testItems->where('category_id', $category->id) as $item)
  <div class="col-md-12">
    <div class='form-check'>
      <div class="custom-control custom-checkbox">
         <input type="checkbox"class="select-test form-check-input form-check-secondary" id="selectTest" name="test_name" value="{{$item->test_name}}">
      </div>
      <input type="checkbox" class="price" id="testPrice" name="test_price" value="{{$item->price}}" >
      <span>{{ucwords($item->test_name)}} ( {{$item->price}} )</span>
   </div>
</div>
@endforeach

This is the script I tried

  var chk1 = $("#selectTest");
  var chk2 = $("#testPrice");
  chk1.on('change',  function(){
  chk2.prop('checked',this.checked);
  });

in this case, the first checkbox only works fine, but rest of them are not working.

how are you supposed to target each one seperately if they all have the same `id=""` ? which is not valid html by the way. — N69S, Nov 12 '21 at 07:34
there are two different id. one is id="selectTest" and other one is id="testPrice" @N69S — Debjit Paul, Nov 12 '21 at 09:13
@DebjitPaul , much as they are different, more ***similar*** `id=` attributes get generated since your HTML markup is in a `@foreach` loop. — steven7mwesigwa, Nov 12 '21 at 09:19
Does this answer your question? [jQuery ID selector works only for the first element](https://stackoverflow.com/questions/11114622/jquery-id-selector-works-only-for-the-first-element) — Don't Panic, Nov 12 '21 at 09:29

steven7mwesigwa · Answer 1 · 2021-11-12T08:24:55.560

It only works for the first checkbox only because id= attributes only match the first matching node in the DOM. Use a class (.selectTest) instead.

You may need to get rid of id="testPrice" as well or make it a class instead.


@foreach($testItems->where('category_id', $category->id) as $item)
  <div class="col-md-12">
    <div class='form-check'>
      <div class="custom-control custom-checkbox">
         <input type="checkbox"class="select-test form-check-input form-check-secondary selectTest" name="test_name" value="{{$item->test_name}}">
      </div>
      <input type="checkbox" class="price" name="test_price" value="{{$item->price}}" >
      <span>{{ucwords($item->test_name)}} ( {{$item->price}} )</span>
   </div>
</div>
@endforeach

The jquery script.

 var chk1 = $(".selectTest");

  chk1.on('change',  function(){

      $(this).closest("div").next().prop('checked', $(this).is(":checked"));

  });

id attribute

The id global attribute defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

Checked a checkbox based on another checkbox if checked

1 Answers1