Laravel, Get Values from checkbox in jquery

You need to add square brackets to your name attribute, i.e. name="check_box[]". This will make the check-boxes hold an array of values, as currently just the last-checked box’s value will be available.

As already mentioned, IDs are meant to be unique, so you will need to query your check-boxes in an alternative manner. If you are using jQuery, you can do this:

var values = $('[name="check_box[]"]').val();

you can try something like this. replace your id with class and make name as an array

<form  method="post">
    @foreach($services as $service) 
    <tr>
        <td><input type="checkbox" name="check_box[]" class="check_box" value={{ $service->id }}></td>
        <td>{{ $service->name }}</td>
    </tr>
   @endforeach 
<form>

then loop through the element and check if it is checked do whatever you want.

<script>

$('.check_box').change(function check(){

    $('.check_box').each(function(idx, el){

        if($(el).is(':checked'))
        { 
            var selectedValue = $(el).val();
            console.log(selectedValue);
        }

    });

});
</script>

Use it like this using class

<form  method="post">
    @foreach($services as $service) 
     <tr>
        <td><input type="checkbox" onchange="check()" name="check_box" class="check_box" value={{ $service->id }}></td>
        <td>{{ $service->name }}</td>
       </tr>
      @endforeach 
<form>


<script type="text/javascript">
  function check() {

    var testing = document.getElementsByClassName('check_box');
    for (int i=0; i< testing.length; i++) {
       console.log(testing[i].value);
    }
  }
</script>

You are going to want to change the ID to a class like class="check_box". This because you should not be using an ID on multiple elements.

Next you can use the code below to loop trough your data (or ofcourse use the array of elements in a different way.

function check() {
    var checkboxes = $('.check_box');
    checkboxes.each(function (index, element) {
        console.log('Value of checkbox ' + index + ' : ' + $(element).val())
    })
}

.each() documentation

PS: I did not test my snippet.

try this:

<ul>
   <li><input type="check(this)" value="one" /></li>
   <li><input type="check(this)" value="two" /></li>
   <li><input type="check(this)" value="three" /></li>
</ul>

Javascript Code

var checkVal = [];
function check(element) { checkVal.push(element.value); }

jQuery Code

var checkVal = [];
function check(element) { checkVal.push($(this).val()); }

Try this below Code

 <div class="mycheckbox">
    @foreach($services as $service) 
                <tr>
                  <td><input type="checkbox" name="check_box" id="check_box" value={{ $service->id }}></td>
                  <td>{{ $service->name }}</td>
                </tr>
                @endforeach
</div>

////In jQuery////

    $(document).on('change', '.mycheckbox', function() {

      var id = $(this).val(); 
      if (id != null) {
        alert(id);
      }

    });