2

I have looked at multiple SO suggestions using JQuery. So far nothing works for me. I have a page full of switchable checkboxes in a Laravel Blade file. The blade entry is surrounded by a foreach statement, thus producing multiple switch checkboxes on the page. Here is the entry in the blade file:

<div class="custom-control custom-switch">
    <input type="hidden" value="0" name="children[{{$child->child_id}}]">
    <input type="checkbox" class="custom-control-input" id="children[{{$child->child_id}}]" name="children[{{$child->child_id}}]" {{ $child->status ? 'checked' : '' }} value="1">
    <label class="custom-control-label" for="children[{{$child->child_id}}]">Absent / Present</label>
</div>

Of the more than six attempts, here is the last one I made. I can select the checkboxes, but I am unable to identify and isolate each specific child id.

$("input:checkbox").click(function () {
        var names = [];
        $('input:checked').each(function() {
            names.push(this.name);
        });
     });

The objective is to collect all those switches which have been turned from off to on. Then they will be sent by ajax to a controller for updating either individually or collectively. Can someone help? Many Thanks.

Vince
  • 1,405
  • 2
  • 20
  • 33
  • hi, interesting, perhaps select on the `:checked` attribute https://stackoverflow.com/questions/5450104/using-jquery-to-get-all-checked-checkboxes-with-a-certain-class-name – IronMan Jan 22 '21 at 03:50
  • Hi, instead of `this.name` can you try with `this.name.split('children')[1]` ? – Swati Jan 22 '21 at 04:29
  • Great progress! My test page has 9 switches in it. Running your code gives me an array of all nice indices and their values when they are switched to 'on' or 1. Super! Next step. In the real world, most of the switches will be on; but not all. When I turn a switch from off to on, I would like to grab only those switches which have been changed. I will then either send an ajax call for that specific switch one by one, or send and array with just the switches which have been changed. Can you please help? – Vince Jan 22 '21 at 04:44

1 Answers1

1

Instead of each loop you can simply check the checkbox which is change is checked if yes send that your to your backend page.

Demo Code :

$("input:checkbox").click(function() {
//if checked...
  if (this.checked) {
    var value = this.name.split('children')[1];
    console.log(value)
    //your ajax call here
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-control custom-switch">
  <input type="hidden" value="0" name="children[{{$child->child_id}}]">
  <input type="checkbox" class="custom-control-input" id="children[{{$child->child_id}}]" name="children1" value="1">
  <label class="custom-control-label" for="children[{{$child->child_id}}]">Absent / Present</label>
</div>
<div class="custom-control custom-switch">
  <input type="hidden" value="0" name="children[{{$child->child_id}}]">
  <input type="checkbox" class="custom-control-input" id="children2" name="children2" value="2">
  <label class="custom-control-label" for="children[{{$child->child_id}}]">Absent / Present</label>
</div>
<div class="custom-control custom-switch">
  <input type="hidden" value="0" name="children[{{$child->child_id}}]">
  <input type="checkbox" class="custom-control-input" id="children3" name="children3" value="3">
  <label class="custom-control-label" for="children[{{$child->child_id}}]">Absent / Present</label>
</div>
Swati
  • 28,069
  • 4
  • 21
  • 41