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>