jQuery: проверьте, НЕ установлен ли флажок

110

Мне сложно это понять. У меня два флажка (в будущем их будет больше):

  • checkSurfaceEnvironment-1
  • checkSurfaceEnvironment-2

По сути, я хочу написать оператор if и проверить, проверяется ли один из них, а другой НЕ проверяется. Самый простой способ сделать следующее:

if ( $("#checkSurfaceEnvironment-1").attr('checked', true) &&
     $("#checkSurfaceEnvironment-2").is('**(NOT??)** :checked') ) {
        // do something
}
user1040259
источник
3
Используйте, чтобы ||не &&проверять, установлен ли какой-либо из них. &&проверяет, отмечены ли оба флажка.
j08691

Ответы:

212

Я использую один надежный способ:

if($("#checkSurfaceEnvironment-1").prop('checked') == true){
    //do something
}

Если вы хотите перебрать отмеченные элементы, используйте родительский элемент

$("#parentId").find("checkbox").each(function(){
    if ($(this).prop('checked')==true){ 
        //do something
    }
});

Больше информации:

Это хорошо работает, потому что у всех флажков есть отмеченное свойство, в котором хранится фактическое состояние флажка. Если вы хотите, вы можете проверить страницу и попытаться установить или снять флажок, и вы заметите, что атрибут «проверено» (если есть) останется прежним. Этот атрибут представляет только начальное состояние флажка, а не текущее состояние. Текущее состояние сохраняется в свойстве, отмеченном элементом dom для этого флажка.

См. Свойства и атрибуты в HTML

Пабло Мешер
источник
2
Умм ... это только что установитсяchecked = true
Нафтали, он же Нил
@Pablo - проверьте мой ответ ниже, который я также считаю надежным / подходящим вариантом.
Аниш Виджендран
@PabloMescher Привет, не могли бы вы мне помочь? Я действительно хочу определить, какие флажки отмечены / отмечены среди нескольких? И включите / отключите текстовое поле рядом с ним. Любая помощь будет принята с благодарностью.
1lastBr3ath
@ 1lastBr3ath конечно, если вы используете jQuery, вам просто нужно найти селектор для текстового поля относительно флажка и использовать мой второй пример. Это будет выглядеть примерно так: if ($ (this) .prop ('checked')) {$ (this) .find ("<textboxSelector>") .attr ("disabled", true); }
Пабло Мешер
1
@Stophface в этом случае это свойство всегда будет логическим, поскольку это вычисляемое свойство, а не строка, поэтому вы можете обойтись без использования ==. Разумно всегда использовать ===, поскольку это не всегда так
Пабло Мешер
77
if (!$("#checkSurfaceEnvironment-1").is(":checked")) {
    // do something if the checkbox is NOT checked
}
Светлана
источник
31

Вы также можете использовать .not()метод jQuery или :not()селектор:

if ($('#checkSurfaceEnvironment').not(':checked').length) {
    // do stuff for not selected
}

Пример JSFiddle


Дополнительные замечания

Из документации jQuery API для :not() селектора :

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

Аниш Виджендран
источник
1
! $ ("# checkSurfaceEnvironment"). is (": checked") возвращает логическое значение. Верно, если флажок не установлен. $ ('# checkSurfaceEnvironment'). not (': checked') возвращает массив элементов DOM. Проверка с помощью if возвращает true, даже если селектор не соответствует и массив пуст. Единственный способ, которым ваш ответ может быть правильным, - это если вы протестировали i $ ('# checkSurfaceEnvironment'). Not (': checked'). Length, который вернет 0 или 1.
Тибо Вициг,
22

Альтернативный способ:

Вот рабочий пример и код, вы также должны использовать 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");
    }
});​

Я прокомментировал способ переключения отмеченного атрибута.

Труфа
источник
9
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было бесконтрольно.

MsGirlPerl
источник
5

Я думаю, что самый простой способ (с помощью jQuery) проверить, установлен ли флажок или НЕ:

если "отмечено":

if ($(this).is(':checked')) {
// I'm checked let's do something
}

если НЕ 'отмечен':

if (!$(this).is(':checked')) {
// I'm NOT checked let's do something
}
Майкл Стахура
источник
4

Вот отрывок по этому вопросу.

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

Ашок
источник
3

Чтобы сделать это так же, .attr()как и у вас, проверить, проверено ли это, будет .attr("checked", "checked")ли оно, а если нет, то будет.attr("checked") == undefined

айып
источник
1

Вернуть 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;
}
Мартин Да Роса
источник
1

Простое и удобное для проверки состояние или состояние без проверки

<input type="checkbox" id="ev-click" name="" value="" >

<script>
    $( "#ev-click" ).click(function() {
        if(this.checked){
            alert('checked');
        }
        if(!this.checked){
            alert('Unchecked');
        }
    });
</script>
Рави Бхорания
источник
1

Попробуй это

if ($("#checkSurfaceEnvironment-1:checked").length>0) {
    //your code in case of NOT checked
}

В приведенном выше коде выберите элемент по идентификатору, а (#checkSurfaceEnvironment-1)затем отфильтруйте его проверенное состояние (:checked)фильтром.

Он вернет массив проверенного объекта элемента. Если в массиве есть какой-либо объект, тогда условие if будет выполнено.

Сатиш Кумар сонкер
источник
Хотя ваш ответ может помочь, вы должны хотя бы объяснить почему. Как бы то ни было, ваш ответ был передан в очередь модерации сообщений низкого качества (именно здесь я его просматриваю). Я предлагаю вам отредактировать свой ответ, чтобы добавить пояснение.
Крис Спитлс,
1

Проверить состояние можно двумя способами.

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
}

Надеюсь, это будет вам полезно.

Гауранг Сондагар
источник
1

Вот самый простой способ

 <script type="text/javascript">

        $(document).ready(function () {
            $("#chk_selall").change("click", function () {

                if (this.checked)
                {
                    //do something
                }
                if (!this.checked)
                {
                    //do something

                }

            });

        });

    </script>
Дебендра Даш
источник
0

Я использовал это и работал у меня!

$("checkbox selector").click(function() {
    if($(this).prop('checked')==true){
       do what you need!
    }
});
Сейед Мохаммад Хоссейни
источник
0

Я знаю, что на это уже был дан ответ, но все же это хороший способ сделать это:

if ($("#checkbox").is(":checked")==false) {
    //Do stuff here like: $(".span").html("<span>Lorem</span>");
}
Привет мир
источник
0
if($("#checkbox1").prop('checked') == false){
    alert('checkbox is not checked');
    //do something
}
else
{ 
    alert('checkbox is checked');
}
Рутвик какадия
источник
4
Хотя это может ответить на вопрос авторов, в нем отсутствуют некоторые поясняющие слова и / или ссылки на документацию. Фрагменты необработанного кода не очень полезны без некоторых фраз. Вы также можете найти очень полезным, как написать хороший ответ . Пожалуйста, отредактируйте свой ответ - Из обзора
Ник
-4
$("#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
    }

});
Cool_Yusuf
источник