jQuery: Перевірте, чи прапорець НЕ встановлений


110

У мене виникають проблеми з'ясувати це. У мене два прапорці (в майбутньому буде більше):

  • checkSurfaceEnvironment-1
  • checkSurfaceEnvironment-2

В основному, я хочу написати оператор if і перевірити, якщо один з них перевіряється, а інший НЕ перевіряється. Який найпростіший спосіб досягти наступного:

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

3
Використовуйте, щоб ||не &&перевіряти, чи встановлено прапорець. &&перевіряє, чи перевіряються обидва .
j08691

Відповіді:


213

Один надійний спосіб, який я використовую:

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 - Перевірте мою відповідь нижче, що я також є надійним / правильним варіантом.
Aneesh Vijendran

@PabloMescher Гей, чи можете ви мені допомогти? Я дійсно хочу визначити, які (-і) прапорці (-и) є / перевіряються серед кількох? І ввімкніть / вимкніть текстове поле поруч. Будь-яка допомога буде високо оцінена.
1lastBr3ath

@ 1lastBr3, звичайно, якщо ви використовуєте jQuery, вам просто потрібно знайти селектор для текстового поля відносно прапорця і використовувати мій другий приклад. Це буде виглядати приблизно так, як ($ (this) .prop ('перевірено')) {$ (this) .find ("<textboxSelector>") .attr ("вимкнено", правда); }
Пабло Мешер

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


додаткові нотатки

З документації API jQuery для :not() селектора :

.Not () метод буде в кінцевому підсумку надати вам більш читається вибором , ніж штовхаючи складні селектори або змінні в : немає) ( селектор фільтр. У більшості випадків це кращий вибір.


1
! $ ("# checkSurfaceEnvironment"). is (": перевірено") повертає булева. Це правда, якщо прапорець не встановлений. $ ('# checkSurfaceEnvironment'). not (': перевірено') повертає масив елементів DOM. Тестуючи це за допомогою "if" повертає "true", навіть якщо не було відповідності селектору, а масив порожній. Єдиний шлях ваш відповідь може бути правильним, якщо ви тестували я $ ( «# checkSurfaceEnvironment») немає ( «: перевірено») довжину, яка буде повертати 0 або 1 ...
Тібо Witzig

22

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

Ось робочий приклад, і ось код, ви також повинні використовувати опору.

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

Повернути істину, якщо всі чекбокси позначені в діві

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
}

У наведеному вище коді, вибираючи елемент за допомогою Id, (#checkSurfaceEnvironment-1)відфільтруйте його за перевіреним станом(:checked) фільтра.

Він поверне масив об'єкта, що перевіряється. Якщо в масиві існує якийсь об'єкт, тоді умова буде виконана.


Хоча ваша відповідь може допомогти, вам слід хоча б пояснити, чому. Так як ваша відповідь передана до черги модерації повідомлень низької якості (саме там я її переглядаю), я пропоную вам відредагувати свою відповідь, щоб додати пояснення.
Кріс Шпітлз,

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.