jquery如果任何複選框被選中

關於選中的複選框有很多問題，但這有些不同。
如果任何複選框被用戶選中，我想顯示一個CSS屬性。如果用戶取消選中所有應該刪除CSS屬性的複選框。
我發現這個代碼jquery如果任何複選框被選中

if (jQuery('#frmTest input[type=checkbox]:checked').length > 0) { 
 
    $(".css-check").css("background-color", "yellow"); 
 
} else { 
 
    $(".css-check").css("background-color", "pink"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="frmTest"> 
 
    <input type="checkbox" name="vehicle" value="Car" class="test">I have a car 
 
    <br> 
 
    <input type="checkbox" name="vehicle" value="Car" class="test">I have a bike 
 
    <br> 
 
    <input type="checkbox" name="vehicle" value="Car" class="test">I have nothing 
 
    <br> 
 
</form> 
 
<div class="css-check">TEST</div>

但是這隻能當我把複選框= 「真」。
總之：
如果沒有複選框被用戶檢查，background-color應該是粉紅色。如果勾選了一個複選框，背景顏色應該是黃色的。

來源

2015-11-30 wordpress user

什麼時候在上面的代碼得到執行？ – Arg0n

可能重複的[jQuery看看是否有任何複選框被選中]（https://stackoverflow.com/questions/4086957/jquery-see-if-any-or-no-checkboxes-are-selected） –

試試這個：

jQuery('#frmTest input[type=checkbox]').on('change', function() { 
 
var len = jQuery('#frmTest input[type=checkbox]:checked').length; 
 
if (len > 0) { 
 
    $(".css-check").css("background-color", "yellow"); 
 
} else if (len === 0) { 
 
    $(".css-check").css("background-color", "pink"); 
 
} 
 
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="frmTest"> 
 
    <input type="checkbox" name="vehicle" value="Car" class="test">I have a car 
 
    <br> 
 
    <input type="checkbox" name="vehicle" value="Car" class="test">I have a bike 
 
    <br> 
 
    <input type="checkbox" name="vehicle" value="Car" class="test">I have nothing 
 
    <br> 
 
</form> 
 
<div class="css-check">TEST</div>

來源

2015-11-30 11:30:18 Rayon

謝謝！作品完美:) –

您應該使用$("#frmTest input[type='checkbox']").change(...)這個事件，如：

$("#frmTest input[type='checkbox']").change(function(){ 
 
if (jQuery('#frmTest input[type=checkbox]:checked').length > 0) { 
 
    $(".css-check").css("background-color", "yellow"); 
 
} else { 
 
    $(".css-check").css("background-color", "pink"); 
 
} 
 
}).trigger("change");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="frmTest"> 
 
    <input type="checkbox" name="vehicle" value="Car" class="test">I have a car 
 
    <br> 
 
    <input type="checkbox" name="vehicle" value="Car" class="test">I have a bike 
 
    <br> 
 
    <input type="checkbox" name="vehicle" value="Car" class="test">I have nothing 
 
    <br> 
 
</form> 
 
<div class="css-check">TEST</div>

來源

2015-11-30 11:29:55 void

謝謝！完美的作品 –

如果你想牛逼Øadd或remove CSS屬性，JQuery的功能addClass和removeClass可能會派上用場，像這樣：

$("input[type=checkbox]").change(function() { 
    if ($('#frmTest input[type=checkbox]:checked').length > 0) { 
     $(".css-check").addClass("highlight"); 
    } else { 
     $(".css-check").removeClass("highlight"); 
    } 
});

CSS：

.highlight{ 
    background-color:red; 
}

Here is the JSFiddle demo

您提供錯過了部分的代碼示例在此處等待複選框更改，因此您需要在chekbox上添加.change(...)事件：

$("input[type=checkbox]").change(function() {...

上面的代碼添加css類highlight由css-check類IF任何複選框被選中標識的元素（即，檢查元件長度大於0）。否則它會從中刪除類，因此刪除CSS屬性。

來源

2015-11-30 11:37:46

你應該上的複選框的change綁定事件，因爲marking/unmarking觸發change事件，您可以使用.trigger(event)觸發應用特定事件：

$('#frmTest :checkbox').change(function() { 
 
    if (jQuery('#frmTest input[type=checkbox]:checked').length > 0) { 
 
    $(".css-check").css("background-color", "yellow"); 
 
    } else { 
 
    $(".css-check").css("background-color", "pink"); 
 
    } 
 
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="frmTest"> 
 
    <input type="checkbox" name="vehicle" value="Car" class="test">I have a car 
 
    <br> 
 
    <input type="checkbox" name="vehicle" value="Car" class="test">I have a bike 
 
    <br> 
 
    <input type="checkbox" name="vehicle" value="Car" class="test">I have nothing 
 
    <br> 
 
</form> 
 
<div class="css-check">TEST</div>

事件本可縮短像此：

$('#frmTest :checkbox').change(function() { 
 
    $(".css-check").css("background-color", function(){ 
 
     return jQuery('#frmTest input[type=checkbox]:checked').length > 0 ? "yellow" : "pink"; 
 
    }); 
 
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="frmTest"> 
 
    <input type="checkbox" name="vehicle" value="Car" class="test">I have a car 
 
    <br> 
 
    <input type="checkbox" name="vehicle" value="Car" class="test">I have a bike 
 
    <br> 
 
    <input type="checkbox" name="vehicle" value="Car" class="test">I have nothing 
 
    <br> 
 
</form> 
 
<div class="css-check">TEST</div>

來源

2015-11-30 11:41:09 Jai

感謝您的幫助:) –

請試試這個代碼：

<script type="text/javascript"> 
$(document).ready(function() { 
if (jQuery('#frmTest input[type=checkbox]:checked').length > 0) { 
    $(".css-check").css("background-color", "yellow"); 
} else { 
    $(".css-check").css("background-color", "pink"); 
} 
$("input[type=checkbox]").change(function() { 
if (jQuery('#frmTest input[type=checkbox]:checked').length > 0) { 
    $(".css-check").css("background-color", "yellow"); 
} else { 
    $(".css-check").css("background-color", "pink"); 
} 
}); 

}); 
</script>

來源

2015-11-30 11:47:33

jquery如果任何複選框被選中

回答

相關問題