jQuery, если какой-либо флажок установлен

Question

Есть много вопросов относительно отмеченного флажка, но это несколько другое.
Я хочу показать свойство css, если какой-либо флажок установлен пользователем. И если пользователь отменяет все флажки, которые нужно удалить из свойства css.
Я нашел этот код

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>

Но это работает только, когда я место Флажок = "истинный".
Вкратце:
, если флажок не установлен флажком, цвет фона должен быть розовым. И если даже один флажок установлен, фоновый цвет должен быть желтым.

Answer 1

Попробуйте это:

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>

Answer 2

Вы должны использовать $("#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>

Answer 3

Если вы хотите т о 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

Код пример, который вы при условии, что пропустил часть где он ждет изменения флажка, поэтому вам нужно добавить событие .change(...) на chekboxes:

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

Приведенный выше код добавляет класс CSS highlight к элементу, идентифицированной css-check класса ЕСЛИ проверяется любой флажок (в том, что проверяется длина элемента больше, чем 0). Кроме того, он удаляет из него класс и, следовательно, удаляет свойство CSS.

Answer 4

Вы должны связать change событие флажков на потому, что marking/unmarking запускает событие изменения, и вы можете использовать .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>

Answer 5

Пожалуйста, попробуйте этот код:

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