Question

编辑：请阅读帖子的结尾部分，我知道那些未经检查的部分需要在代码块内，这里的问题是代码的第一部分没有注册“点击”。所以没有这个就做不了。

E2：可以采取在盒子上添加onclick的建议，因为盒子的代码是用JS生成的，我会添加一次，所有这些都会得到函数调用，但感觉有点难看

我有一组复选框，当单击一个复选框时，我需要返回未选中复选框的值。 HTML：

<div id="myCheckboxList">
<input type="checkbox" name="myList" value="1" checked>1
<input type="checkbox" name="myList" value="2" checked>2
<input type="checkbox" name="myList" value="3" checked>3
</div>

JavaScript的：

$(function(){
  $("input[name=myList]").on("click",function(){
    console.log("triggered");
    //code here to find which ones are unchecked

  });
});

我也尝试在代码中添加它

$boxes = $('input[name=myList]:not(:checked)');
$boxes.each(function(){
    // Do stuff with for each unchecked box
});

不幸的是“触发”没有输出到控制台，所以不确定为什么会这样，以及如何在复选框被点击时发生事件

Answer 1

最简单的方法是：

let v = $(this).attr('value');
if(v === 1){ // box 1 selected

在'click'处理程序中添加此内容应该有效。

Answer 2

试试这样：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myCheckboxList">
<input type="checkbox" name="myList" value="1" checked>1
<input type="checkbox" name="myList" value="2" checked>2
<input type="checkbox" name="myList" value="3" checked>3
</div>

＆＃13;

window

＆＃13;

Answer 3

您需要在点击事件中添加每个脚本。

＆＃13;

<div id="myCheckboxList">
  <input type="checkbox" name="myList" value="1" checked>1
  <input type="checkbox" name="myList" value="2" checked>2
  <input type="checkbox" name="myList" value="3" checked>3
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

{{1}}

＆＃13;

Answer 4

我将你的代码直接复制到一个小提琴，它工作正常。您可能错过了jquery库？

编辑：

为了确保，我更新了片段以生成输入，它仍然可以正常工作。

＆＃13;

$(function() {
  var html = '<input type="checkbox" name="myList" value="1" checked>1'
  +'<input type="checkbox" name="myList" value="2" checked>2'
  +'<input type="checkbox" name="myList" value="3" checked>3';
  
  $("#myCheckboxList").html(html);

  $("input[name=myList]").on("click", function() {
    console.log("triggered");
    //code here to find which ones are unchecked
    $boxes = $('input[name=myList]:not(:checked)');
    $boxes.each(function() {
      console.log($(this).val());
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myCheckboxList">
</div>

＆＃13;

Answer 5

另一个解决方案是在你的html中添加一个“onclick”方法。只要单击复选框，这将调用javascript函数。该函数可以包含复选框的任何逻辑。

<input type="checkbox" name="myList" value="1" checked onclick="checkboxChangeEvent();">1

然后，您可以实现您的javascript函数以返回未选中框的列表或按名称查找输入框，并按照之前的答案返回警报。

function checkboxChangeEvent(){
    $boxes = $('input[name=myList]:not(:checked)');
    $boxes.each(function() {
      alert($(this).val());
    });
}

单击复选框时，如何知道复选框的状态

5 个答案: