Question

我有一个问题，我试图从复选框到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>

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

有人可以帮助我吗？

Answer 1

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

正如已经提到的，ID是唯一的，因此您将需要以其他方式查询您的复选框。如果您使用的是jQuery，则可以执行以下操作：

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

Answer 2

您可以尝试类似的方法。将您的id替换为class并将名称命名为数组

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

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

Answer 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：我没有测试代码段。

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

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

    });

Laravel，从jQuery中的复选框获取值

6 个答案: