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


110

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

  • checkSurfaceEnvironment-1
  • checkSurfaceEnvironment-2

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

if ( $("#checkSurfaceEnvironment-1").attr('checked', true) &&
     $("#checkSurfaceEnvironment-2").is('**(NOT??)** :checked') ) {
        // do something
}

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 в этом случае это свойство всегда будет логическим, поскольку это вычисляемое свойство, а не строка, поэтому вы можете обойтись без использования ==. Разумно всегда использовать ===, поскольку это не всегда так
Пабло Мешер


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");
    }
});​

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



6

Я искал более прямую реализацию, как предложил avijendr.

У меня были небольшие проблемы с его / ее синтаксисом, но я заставил это работать:

if ($('.user-forms input[id*="chkPrint"]:not(:checked)').length > 0)

В моем случае, я был стол с классом user-forms, и я проверял , если какие - либо из флажков , которые имели строку checkPrintв их idбыло бесконтрольно.


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

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

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
    }

});
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.