Question

我的复选框是动态的，并且只需要检查是否单击了带有“ OTHERS”的复选框即可。所以我的复选框是：

<div class="form-group" id="documents">
   <label> <input id="check_id1" type="checkbox" value="1" class="chk1" checked=""> <span>Invoice</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
   <label> <input id="check_id2" type="checkbox" value="2" class="chk2" checked=""> <span>Packing List</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
   <label> <input id="check_id3" type="checkbox" value="3" class="chk3" checked=""> <span>OTHERS</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
</div>

所以我尝试检查是否已选中“其他” 复选框，但未触发 alert（）。

if($("span:contains('OTHERS')").prop('checked') == true){
                alert("here");

            }

Answer 1

您不是在检查输入Elm的道具，而是在检查使用此代码的span道具

//gets the input
const elm = $("span:contains('OTHERS')").siblings()[0];
if($(elm).prop('checked')) alert("here");

Answer 2

看来，我们首先需要检查Checkbox是否已选中，然后检查其同级文本值是否等于“ OTHERS”。

我以这种方式触发了警报：

  $("input[type='checkbox']").change(function(){
   if($(this).prop('checked') == true && $(this).siblings("span").text() == "OTHERS"){
        alert("here");
    }
  });

我们还可以通过直接将value="OTHERS"分配给复选框来更改HTML，以进一步简化HTML。

$("input[value='OTHERS']").change(function(){
     if($(this).prop('checked') == true){
            alert("here");
        }
  });

Answer 3

这是一个DOM遍历问题-您需要从跨度UP到父级，然后再向下DOWN才能找到输入-被选中。

还-请注意，在输入中放置“ checked =“”等效于“ checked =” checked”-这就是为什么此代码段显示为选中状态。

编辑-更新了解决方案，以允许基于“其他”标签的点击来设置变量

let myvariable;

$('label').click(function(){
  let spanText = $(this).find('span').text();
  let inputChecked = $(this).find('input').is(':checked')

  if(spanText == 'OTHERS' && inputChecked){
     myvariable = 3;
     alert(myvariable);
   }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="documents">
   <label> <input id="check_id1" type="checkbox" value="1" class="chk1"> <span>Invoice</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
   <label> <input id="check_id2" type="checkbox" value="2" class="chk2"> <span>Packing List</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
   <label> <input id="check_id3" type="checkbox" value="3" class="chk3"> <span>OTHERS</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
</div>

Answer 4

这将跨所有复选框，并选中具有“ OTHERS”的其他复选框。

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#check').addEventListener('click', () => {
    document.querySelectorAll('input[type="checkbox"]').forEach(chk => {
      if(chk.parentNode.querySelector('span').innerText == 'OTHERS') {
        alert(chk.checked);
      }
    });
  });


});

<div class="form-group" id="documents">
   <label> <input id="check_id1" type="checkbox" value="1" class="chk1" checked=""> <span>Invoice</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
   <label> <input id="check_id2" type="checkbox" value="2" class="chk2" checked=""> <span>Packing List</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
   <label> <input id="check_id3" type="checkbox" value="3" class="chk3" checked=""> <span>OTHERS</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
</div>
<!-- Just for the answer -->
<button id="check">Check</button>

Answer 5

尝试

const elm = $("span:contains('OTHERS')").closest("label").find("input[type=checkbox]");
if($(elm).prop('checked')) alert("here");

如何使用javascript / jquery检查复选框是否被选中的条件？

5 个答案: