jQuery的获得所有非选中的复选框

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

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

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

Answer 2

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

Answer 3

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