Question

HTML：

<input type="checkbox" class="checkbox color" name="color[]" value="Gray">
<input type="checkbox" class="checkbox color" name="color[]" value="red">
<input type="checkbox" class="checkbox color" name="color[]" value="black">
<input type="checkbox" class="checkbox color" name="color[]" value="yellow">

jQuery的：

$(".color").click(function(){
    console.log($(".color:not(:checked)").val());
})

我的代码正在运行，但它只显示一个元素。如何解决此错误？

Answer 1

您可以使用以下脚本Updated Fiddle

res

$(".color").change(function(){
	$(".color").each(function(){
		if (!$(this).prop("checked")) {
			alert($(this).val());
		}
	});
});

Answer 2

@super-user提供了完全可以接受的answer，但您可以通过使用jQuery map()函数转换数组然后使用join()输出结果来进一步简化此操作作为一个字符串。

$(".color").click(function(){ 
  $("p").text(jQuery.map($(".color:not(:checked)"), function(val, index) {
    return $(val).val();
  }).join(",")); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox color" name="color[]" value="Gray">
<input type="checkbox" class="checkbox color" name="color[]" value="red">
<input type="checkbox" class="checkbox color" name="color[]" value="black">
<input type="checkbox" class="checkbox color" name="color[]" value="yellow">
<p></p>

Answer 3

$("input[name='color[]']").each( function () {
  if ($(this).is(":checked")) 
  {                                 
  }
  else
  {
  }
});

jQuery获取所有未选中的复选框

3 个答案: