У меня проблемы с выяснением этого. У меня есть два флажка (в будущем будет больше):
-
checkSurfaceEnvironment-1
-
checkSurfaceEnvironment-2
По сути, я хочу написать оператор if и проверить, если один из них проверен, а другой НЕ проверен. Какой самый простой способ сделать следующее:
if ( $("#checkSurfaceEnvironment-1").attr('checked', true) &&
$("#checkSurfaceEnvironment-2").is('**(NOT??)** :checked') ) {
// do something
}
Ответ 1
Один из надежных способов использования:
if($("#checkSurfaceEnvironment-1").prop('checked') == true){
//do something
}
Если вы хотите итерации по отмеченным элементам, используйте родительский элемент
$("#parentId").find("checkbox").each(function(){
if ($(this).prop('checked')==true){
//do something
}
});
Дополнительная информация:
Это хорошо работает, потому что у всех флажков проверено свойство, в котором хранится фактическое состояние флажка. Если вы хотите, вы можете проверить страницу и попытаться установить флажок и снять флажок, и вы заметите, что атрибут "checked" (если присутствует) останется таким же. Этот атрибут представляет только начальное состояние флажка, а не текущее состояние. Текущее состояние сохраняется в свойстве, отмеченном элементом dom для этого флажка.
Смотрите Свойства и атрибуты в HTML
Ответ 2
if (!$("#checkSurfaceEnvironment-1").is(":checked")) {
// do something if the checkbox is NOT checked
}
Ответ 3
Вы также можете использовать метод jQuery .not()
или селектор: :not()
:
if ($('#checkSurfaceEnvironment').not(':checked').length) {
// do stuff for not selected
}
Пример JSFiddle
Дополнительные примечания
Из документации API jQuery для селектора: :not()
:
Метод .not() в итоге предоставит вам более читаемые выборки, чем вставка сложных селекторов или переменных в фильтр селекторов : not(). В большинстве случаев это лучший выбор.
Ответ 4
Альтернативный способ:
Вот рабочий пример, и вот код, вы также должны использовать prop.
$('input[type="checkbox"]').mouseenter(function() {
if ($(this).is(':checked')) {
//$(this).prop('checked',false);
alert("is checked");
} else {
//$(this).prop('checked',true);
alert("not checked");
}
});
Я прокомментировал способ переключения проверенного атрибута.
Ответ 5
if ( $("#checkSurfaceEnvironment-1").is(":checked") && $("#checkSurfaceEnvironment-2").not(":checked") )
Ответ 6
Я искал более непосредственную реализацию, такую как avijendr.
У меня была небольшая проблема с его синтаксисом, но я получил это для работы:
if ($('.user-forms input[id*="chkPrint"]:not(:checked)').length > 0)
В моем случае у меня была таблица с классом user-forms
, и я проверял, не были ли отмечены какие-либо из флажков с строкой checkPrint
в их id
.
Ответ 7
Чтобы сделать это с помощью .attr()
, как у вас, чтобы проверить, будет ли он отмечен, он будет .attr("checked", "checked")
, и если это не так, то .attr("checked") == undefined
Ответ 8
Здесь у меня есть фрагмент для этого вопроса.
$(function(){
$("#buttoncheck").click(function(){
if($('[type="checkbox"]').is(":checked")){
$('.checkboxStatus').html("Congratulations! "+$('[type="checkbox"]:checked').length+" checkbox checked");
}else{
$('.checkboxStatus').html("Sorry! Checkbox is not checked");
}
return false;
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<label>
<input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0">
Checkbox</label>
<br>
<label>
<input type="checkbox" name="CheckboxGroup1_" value="checkbox" id="CheckboxGroup1_1">
Checkbox</label>
<br>
</p>
<p>
<input type="reset" value="Reset">
<input type="submit" id="buttoncheck" value="Check">
</p>
<p class="checkboxStatus"></p>
</form>
Ответ 9
Возвращает true, если все чекбоксы отмечены в div
function all_checked (id_div){
all_checked = true;
$(id_div+' input[type="checkbox"]').each(function() {
all_checked = all_checked && $('this').prop('checked');
}
return all_checked;
}
Ответ 10
попробуйте этот
if ($("#checkSurfaceEnvironment-1:checked").length>0) {
//your code in case of NOT checked
}
В вышестоящем коде, выбирая элемент Id (#checkSurfaceEnvironment-1)
, затем отфильтруйте его проверенное состояние с помощью фильтра (:checked)
.
Он вернет массив объекта элемента checked. Если в массиве есть какой-либо объект, тогда условие будет выполнено.
Ответ 11
Простое и простое или непроверенное условие
<input type="checkbox" id="ev-click" name="" value="" >
<script>
$( "#ev-click" ).click(function() {
if(this.checked){
alert('checked');
}
if(!this.checked){
alert('Unchecked');
}
});
</script>
Ответ 12
Есть два способа проверить состояние.
if ($("#checkSurfaceEnvironment-1").is(":checked")) {
// Put your code here if checkbox is checked
}
ИЛИ вы также можете использовать этот
if($("#checkSurfaceEnvironment-1").prop('checked') == true){
// Put your code here if checkbox is checked
}
Я надеюсь, что это будет полезно для вас.
Ответ 13
Вот самый простой способ
<script type="text/javascript">
$(document).ready(function () {
$("#chk_selall").change("click", function () {
if (this.checked)
{
//do something
}
if (!this.checked)
{
//do something
}
});
});
</script>
Ответ 14
Я использовал это и работал у меня!
$("checkbox selector").click(function() {
if($(this).prop('checked')==true){
do what you need!
}
});
Ответ 15
Я знаю, что на это уже ответили, но все же, это хороший способ сделать это:
if ($("#checkbox").is(":checked")==false) {
//Do stuff here like: $(".span").html("<span>Lorem</span>");
}
Ответ 16
if($("#checkbox1").prop('checked') == false){
alert('checkbox is not checked');
//do something
}
else
{
alert('checkbox is checked');
}
Ответ 17
Я думаю, что самый простой способ (с помощью jQuery) проверить, если флажок установлен или НЕ является:
если 'проверено':
if ($(this).is(':checked')) {
// I'm checked let do something
}
если НЕ "проверено":
if (!$(this).is(':checked')) {
// I'm NOT checked let do something
}
Ответ 18
$("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4").change(function () {
var item = $("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4");
if (item.is(":checked")==true) {
//execute your code here
}
else if (item.is(":not(:checked)"))
{
//execute your code here
}
});