Question

我正在打印行列表。在我的每个列中，都有2个复选框，

<?php
for($b=0; $b<$RoomSize["COL"]; $b++){
?>
    <div class="col">
    <?php
        $ColKeyExist = checkIfKeyExist($GetSeatLayout, $b, 2);
        if($RowKeyExist){
            if($ColKeyExist){
                if($GetSeatLayout[$a]["ROWID"]==$a && $GetSeatLayout[$a]["COLUMNID"]==$b){
    ?>
                  <div id=<?=$a.",".$b?>>
                    <div class="form-check pl-0">
                      <input class="form-check-input" type="checkbox" name="SEATNO" value=<?=$a.",".$b?>>
                      <label class="fas fa-chair SEATIMAGE"></label>
                      <input class="form-check-input" type="checkbox" name="SEATSTATUS" value=0 >
                    </div>
                  </div>
    </div>
    <?php
                }
            }
        }
    ?>

这是我的JQUERY代码。我尝试遵循文档，但未能实现输出

$(".col").click(function (e) { 
    $(this).find('input[type="checkbox"]').each(function (a) {
    $(this).prop('checked', "checked");

    });    
});

当单击特定的“ .col”时，我希望它找到其下方的所有复选框并进行检查，

Answer 1

尝试一下

$('.col input[type=checkbox]').each(function (){
  //use one of the below
  $(this).prop('checked', true); 
  $(this).attr('checked', true); // if your jQuery 1.5.x and below
});

Answer 2

您需要在那里进行一些修改，请参见以下代码段：

$(document).ready(function(){
	$(".col").click(function (e) {
	let col = $(this); // This line ensure you get outer scope where you clicking.
	col.find('input[type="checkbox"]').each(function (a) {
		col.find('input[type="checkbox"]').eq(a).prop('checked', "checked");
	});    
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
      <div id="col-1">
        <div class="form-check pl-0">
          <input class="form-check-input" type="checkbox" name="SEATNO">
          <label class="fas fa-chair SEATIMAGE"></label>
          <input class="form-check-input" type="checkbox" name="SEATSTATUS" value="0">
        </div>
      </div>
    </div>
    <div class="col">
      <div id="col-2">
        <div class="form-check pl-0">
          <input class="form-check-input" type="checkbox" name="SEATNO" value="0">
          <label class="fas fa-chair SEATIMAGE"></label>
          <input class="form-check-input" type="checkbox" name="SEATSTATUS" value="0">
        </div>
      </div>
    </div>

或者，如果您不想迭代checkbox并只在.col内检查它们，那么就不需要触发.each函数，您可以按照以下方式简单地编写代码：

$(".col").click(function (e) {
    $(this).find('input[type="checkbox"]').prop('checked', "checked");
});

Answer 3

$(document).ready(function () {
    $(".col").click(function (e) { 
        console.log("success");

        $(this).find('input[type="checkbox"]').each(function (a) {
            var isChecked = $(this).prop('checked');
            if(isChecked == true){
                $(this).prop('checked', false);
            }else if(isChecked == false){
                $(this).prop('checked', true);
            }

        });    
    });
});

如何使用JQuery和find一起使用？

3 个答案: