Laravel，从 jquery 中的复选框获取值答案

【问题标题】：Laravel, Get Values from checkbox in jqueryLaravel，从 jquery 中的复选框获取值
【发布时间】：2018-07-11 11:00:59
【问题描述】：

我有一个问题，我试图将值从复选框获取到 jquery，但我只得到一个值，并且所有复选框都有该值，这是我的代码：

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

服务名称是多个，用户可以选择多个选项，我想在 jquery 中获得多个选项，这是我的 jquery 代码：

  <script type="text/javascript">
  function check(){
    var testing = document.getElementById('check_box').value;
    console.log(testing);

  }
</script>

它只给出第一个循环的值。

谁能帮帮我？

【问题讨论】：

不要使用多个ID！而是使用类。
使用多个 ID 违背了 ID（标识符）的目的。根据定义，ID 是唯一的。
是否要记录所有选中的复选框值？

标签： php jquery ajax laravel-5

【解决方案1】：

您需要在name 属性中添加方括号，即name="check_box[]"。这将使复选框包含一个值数组，因为目前只有最后一个复选框的值可用。

如前所述，ID 应该是唯一的，因此您需要以另一种方式查询您的复选框。如果你使用 jQuery，你可以这样做：

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

【讨论】：

【解决方案2】：

你可以试试这样的。将您的 id 替换为 class 并将 name 设为数组

<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>

然后循环遍历元素并检查它是否被选中做任何你想做的事情。

<script>

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

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

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

    });

});
</script>

【讨论】：

【解决方案3】：

使用类像这样使用它

<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>

【讨论】：

将方括号添加到您的名称属性，即 name="check_box[]"

【解决方案4】：

您需要将 ID 更改为 class="check_box" 之类的类。这是因为您不应该在多个元素上使用 ID。

接下来，您可以使用下面的代码循环遍历您的数据（或者当然以不同的方式使用元素数组。

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

.each() documentation

PS：我没有测试我的 sn-p。

【讨论】：

【解决方案5】：

试试这个：

<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 代码

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

jQuery 代码

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

【讨论】：

【解决方案6】：

试试下面的代码

 <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);
      }

    });

【讨论】：