Question

我的单选按钮是动态命名的。如何选中所有div点击复选框。 div和每个电台都有唯一的ID。 div实际上代表卡。我要点击卡片后如何选择div中列出的所有收音机如何从javascript动态获取所有子节点，但检查所有广播

<div id=<?= ($counter-1) ?> class="card categoryCard" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title"><?= $rows[$counter-1]["TICKETDESCRIPTION"]?></h5>
    <input type="radio" id=<?='TICKETDESCRIPTION'.($counter-1) ?> name="TICKETDESCRIPTION" >
    <p class="card-text"><label>RM <?= $rows[$counter-1]["TICKETPRICE"]?></label></p>
    <input type="radio" id=<?='TICKETPRICE'.($counter-1) ?> name="TICKETPRICE" >
  </div>
</div>

下面是我的JavaScript代码

$('.categoryCard').click(function(){
    var id = $(this).attr('id');
    var radiobtn = document.getElementById("TICKETDESCRIPTION"+id);
    radiobtn.checked = true;
    alert(id);
});

Answer 1

__NSStackBlock__

Answer 2

有很多方法可以实现相同的目的。我已经描述了两种方式。

您不得将ID重复使用。

ID是元素的标识符，因此不能重复。

$('.categoryCard').click(function(e){
   $('input[type="radio"]', this).each( function( index, element) {
     $(element).prop('checked', true);

   });

});

$('.categoryCard').click(function(e){
  var id = $(this).attr('id');
   $('input[data-details="'+ id +'"]', this).each( function( index, element) {
     $(element).prop('checked', true);

   });

});

.categoryCard{
border: 1px solid #d4d4d4;
padding: 5px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="1" class="card categoryCard" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Desc</h5>
    <input type="radio" name="TICKETDESCRIPTION">
    <p class="card-text">Price</p>
    <input type="radio" name="TICKETPRICE" >
  </div>
</div>

<!-- 2nd Method there must be no duplicate ID  -->

<div id="2" class="card categoryCard" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Desc</h5>
    <input type="radio" name="TICKETDESCRIPTION" data-details ="1">
    <p class="card-text">Price</p>
    <input type="radio" name="TICKETPRICE" data-details ="1" >
  </div>
</div>

Answer 3

也可以这样解决：-

$('.categoryCard').click(function(){
   $(this).find('input[type="radio"]').each(function() {
     $(this).prop('checked', true);
   });
});

单击DIV时，选中多个复选框（不具有相同名称）

3 个答案: