演示

Question

如果要检查另一个复选框，我正在尝试自动检查复选框的隐藏数组

我的HTML代码（我正在使用laravel .blade视图）：

<td>
    <input type="checkbox" name="check[]" id="check[]" value="{{ $booking->teacher_rate * $booking->duration }}">
</td>
<td>{{ $booking->id }}</td>
<input id="booking_id[]" name="booking_id[]" class="hidden" type="checkbox" style="visibility: hidden" value="{{ $booking->id }}">

这里是我的代码：

$.each($("input[name='check[]']:checked"), function( index, value){
    var i = index;            
    $('input[name="booking_id[]"]').map(function(index){ 
        var $this = $(this);
        if(i == index) { $this.prop('checked', true); } 
    }).get();  
});

当我试图获取他们的价值观时，这对我来说并不奏效。

var ids = $('input[name="booking_id[]:checked"]').map(function(){ 
    return this.value; 
}).get();  

console.log(ids);

Answer 1

您的选择器不正确，：checked应该出现在选择器中。

我提供了解决您的问题的另一种方法，该方法使用略有不同的代码。我已将click事件附加到每个可见的输入复选框，然后下面的代码行根据可见的复选框选中/取消选中隐藏的复选框：

$(this).closest("tr").find("input[name='booking_id[]']").prop('checked', $(this).prop('checked'));

$(this)从单击的复选框开始
.closest("tr")在DOM树上向上移动，直到找到第一行元素
.find("input[name='booking_id[]']")在DOM树中向下搜索名称为'booking_id []'的所有输入
.prop('checked', $(this).prop('checked'))更改当前元素的属性checked（即booking_id复选框），以匹配最初单击的元素的checked属性

演示

// Add click event to each of your visible checkboxes
$(document).on("click", "input[name='check[]']", function() {

  // Traverse up DOM to row, then find any input with booking_id[] name, mark this as checked/unchecked as per visible one
  $(this).closest("tr").find("input[name='booking_id[]']").prop('checked', $(this).prop('checked'));

});



$("#compile").click( function() {
var ids = $('input[name="booking_id[]"]:checked').map(function() {
  return this.value;
}).get();
console.log(ids);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table>


  <tr>
    <td><input type="checkbox" name="check[]" id="check[]" value="10"></td>
    <td>ID10</td>
    <td>
    <input id="booking_id[]" name="booking_id[]" class="hidden" type="checkbox" style="visibility: hidden" value="ID10">
</td>
  </tr>


  <tr>
    <td><input type="checkbox" name="check[]" id="check[]" value="20"></td>
    <td>ID20</td>
    <td>
    <input id="booking_id[]" name="booking_id[]" class="hidden" type="checkbox" style="visibility: hidden" value="ID20">
</td>
  </tr>
  
  

  <tr>
    <td><input type="checkbox" name="check[]" id="check[]" value="30"></td>
    <td>ID30</td>
    <td>
    <input id="booking_id[]" name="booking_id[]" class="hidden" type="checkbox" value="ID30">Unhidden for demo purposes
</td>
  </tr>
  
</table>

<button id="compile"> Compile</button>

如果检查了另一个输入，如何检查一个输入？

1 个答案:

演示