單擊復選框后，如何知道復選框的狀態

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

嘗試這樣：

 $(function(){ $("input[name=myList]").on("click",function(){ var uncheck=[]; //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 uncheck.push($(this).attr('value')) console.log(uncheck); }); }); }); 

 <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> 

Answer 3

您需要在click事件中添加每個腳本。

 $(function(){ $("input[name=myList]").on("click",function(){ $("input[name=myList]:not(:checked)").each(function() { console.log($(this).val()); }); }); }); 

 <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> 

Answer 4

我將您的代碼直接復制到了一個小提琴，並且工作正常。 您可能會缺少jQuery庫？

編輯：

可以肯定的是，我更新了代碼片段以生成輸入，並且仍然可以正常工作。

 $(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()); }); }); }); 

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

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());
    });
}