Как проверить, установлен ли флажок в jQuery?

Question

Как проверить, установлен ли флажок в jQuery?

Мне нужно проверить checked свойство флажка и выполнить действие, основанное на проверенном свойстве, используя jQuery.

Например, если флажок возраста установлен, то мне нужно показать текстовое поле для ввода возраста, иначе скрыть текстовое поле.

Но следующий код возвращает false по умолчанию:

if ($('#isAgeSelected').attr('checked'))
{
    $("#txtAge").show();
}
else
{
    $("#txtAge").hide();
}

Как мне успешно запросить checked имущество?

5182

javascript html jquery dom checkbox

Источник

user111435 23 май '09 в 15:16

70 ответов

Другие вопросы по тегам javascript html jquery dom checkbox

user2385302 08 янв '15 в 13:10 2015-01-08 13:10 · Answer 1 · 2015-01-08 13:10

Переключить: 0/1 или еще

<input type="checkbox" id="nolunch" />
<input id="checklunch />"

    $('#nolunch').change(function () {
    if ($(this).is(':checked')) {
        $('#checklunch').val('1');
    };
    if ($(this).is(':checked') == false) {
        $('#checklunch').val('0');
    };
});

24

Источник

user2385302 08 янв '15 в 13:10

user9704900 29 май '19 в 04:46 2019-05-29 04:46 · Answer 2 · 2019-05-29 04:46

Пожалуйста, попробуйте ниже код, чтобы проверить флажок установлен или нет

$(document).ready(function(){

$("#isAgeSelected").on('change',function(){

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else{
    $("#txtAge").hide();  // unchecked
}

});

});

23

Источник

user9704900 29 май '19 в 04:46

user4686674 04 июн '15 в 05:07 2015-06-04 05:07 · Answer 3 · 2015-06-04 05:07

Я думаю, что это будет простой

$('#isAgeSelected').change(function() {
    if($(this).is(":checked")) {
        $('#txtAge').show();
    }
else{
        $('#txtAge').hide();
    }                                          
});

23

Источник

user4686674 04 июн '15 в 05:07

user1210852 15 ноя '13 в 10:50 2013-11-15 10:50 · Answer 4 · 2013-11-15 10:50

Я уверен, что это не какое-то откровение, но я не видел всего этого в одном примере:

Селектор для всех отмеченных флажков (на странице):

$('input[type=checkbox]:checked')

20

Источник

user1210852 15 ноя '13 в 10:50

user1110895 07 фев '12 в 18:43 2012-02-07 18:43 · Answer 5 · 2012-02-07 18:43

Я проверил в Firefox 9.0.1, что для определения состояния изменения после флажка работает следующее:

$("#mycheckbox").change(function() {
    var value = $(this).prop("checked") ? 'true' : 'false';                     
    alert(value);
});

19

Источник

user1110895 07 фев '12 в 18:43

user782535 02 мар '13 в 05:38 2013-03-02 05:38 · Answer 6 · 2013-03-02 05:38

Включите jQuery из локальной файловой системы. Я использовал CDN от Google, и есть также много CDN на выбор.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Код будет выполнен, как только флажок внутри mycheck класс нажал. Если установлен текущий флажок, он отключит все остальные и активирует текущий. Если текущий не отмечен, он снова включит все флажки для перепроверки.

<script type="text/javascript">
    $(document).ready(function() {

        var checkbox_selector = '.mycheck input[type=checkbox]';

        $(checkbox_selector).click(function() {
            if ($($(this)).is(':checked')) {

                // Disable all checkboxes
                $(checkbox_selector).attr('disabled', 'disabled');

                // Enable current one
                $($(this)).removeAttr('disabled');
            }
            else {
                // If unchecked open all checkbox
                $(checkbox_selector).removeAttr('disabled');
            }
        });
    });
</script>

Простая форма для тестирования

<form method="post" action="">
    <div class="mycheck">
        <input type="checkbox" value="1" /> Television
        <input type="checkbox" value="2" /> Computer
        <input type="checkbox" value="3" /> Laptop
        <input type="checkbox" value="4" /> Camera
        <input type="checkbox" value="5" /> Music Systems
    </div>
</form>

Экран вывода:

user1497812 10 июн '13 в 13:12 2013-06-10 13:12 · Answer 7 · 2013-06-10 13:12

if($("#checkkBoxId").is(':checked')){
  alert("Checked=true");
}

или же

if($("#checkkBoxId").attr('checked') == true){
  alert("checked=true");
}

17

Источник

user1497812 10 июн '13 в 13:12

user2323821 10 окт '13 в 06:23 2013-10-10 06:23 · Answer 8 · 2013-10-10 06:23

checked атрибут input type="checkbox" сопоставляется с defaultChecked собственности, а не с checked имущество.

Поэтому, когда вы делаете что-то на странице, когда флажок не установлен, используйте prop() метод вместо. Он выбирает значение свойства и изменяется по мере изменения состояния флажка.

С помощью attr() или же getAttribute(в чистом JavaScript) в этих случаях неправильный способ ведения дел.

если elem это флажок, а затем сделать что-то вроде этого, чтобы получить значение:

elem.checked

или же

$(elem).prop('checked')

user1471017 03 фев '20 в 09:20 2020-02-03 09:20 · Answer 9 · 2020-02-03 09:20

$(document).on("click","#isAgeSelected",function(){
  if($(this).prop("checked") == true){
    $("#txtAge").show();
  }
  else if($(this).prop("checked") == false){
    $("#txtAge").hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <input type="checkbox" id="isAgeSelected"/>

<div id="txtAge" style="display:none">
<input type="text" name="age" placeholder="Please enter age" />
</div>

15

Источник

user1471017 03 фев '20 в 09:20

user2128327 14 май '14 в 05:42 2014-05-14 05:42 · Answer 10 · 2014-05-14 05:42

автоматизированный

$(document).ready(function()
{
    $('#isAgeSelected').change(function()
    {
        alert( 'value =' + $('#chkSelect').attr('checked') );
    });
});

HTML

<b> <input type="isAgeSelected" id="chkSelect" /> Age Check </b>

<br/><br/>

<input type="button" id="btnCheck" value="check" />

JQuery

$(document).ready(function()
{
    $('#btnCheck').click(function()
    {
        var isChecked = $('#isAgeSelected').attr('checked');

        if (isChecked == 'checked')
            alert('check-box is checked');
        else
            alert('check-box is not checked');
    })
});

Ajax

function check()
{
    if (isAgeSelected())
        alert('check-box is checked');
    else
        alert('check-box is not checked');
}

function isAgeSelected()
{
    return ($get("isAgeSelected").checked == true);
}

user2088442 15 июл '13 в 15:50 2013-07-15 15:50 · Answer 11 · 2013-07-15 15:50

Это минимальное количество кода, я думаю, мне нужно было сделать что-то подобное эффективно. Я нашел этот метод полезным; он возвращает массив флажков, которые отмечены, и затем вы можете использовать их значение (это решение использует jQuery):

// This is how you get them
var output = "";
var checkedBoxes = $("DivCheckBoxesAreIn").children("input:checked");
if(checkedBoxes.length <= 0) {
    alert('Please select check boxes');
    return false;
};

// And this is how you use them:
checkedBoxes.each(function() {
    output +=  this.value + ", ";
};

Вывод "output" выдаст вам список значений, разделенных запятыми.

user7602110 11 сен '18 в 00:51 2018-09-11 00:51 · Answer 12 · 2018-09-11 00:51

Используя чистый JavaScript:

let checkbox = document.getElementById('checkboxID');

if(checkbox.checked) {
  alert('is checked');
} else {
  alert('not checked yet');
}

14

Источник

user7602110 11 сен '18 в 00:51

user4837335 14 июл '18 в 07:47 2018-07-14 07:47 · Answer 13 · 2018-07-14 07:47

Просто используйте его, как показано ниже

 $('#isAgeSelected').change(function() {
     if ($(this).is(":checked")) { // or if($("#isAgeSelected").attr('checked') == true){
         $('#txtAge').show();
     } else {
         $('#txtAge').hide();
     }
 });

13

Источник

user4837335 14 июл '18 в 07:47

user536552 09 дек '10 в 14:44 2010-12-09 14:44 · Answer 14 · 2010-12-09 14:44

У меня возникла та же проблема, и ни одно из опубликованных решений, похоже, не сработало, а затем я обнаружил, что это потому, что ASP.NET отображает элемент управления CheckBox как SPAN с INPUT внутри, поэтому идентификатор CheckBox на самом деле является идентификатором SPAN, а не INPUT, поэтому вы должны использовать:

$('#isAgeSelected input')

скорее, чем

$('#isAgeSelected')

и тогда все методы, перечисленные выше, должны работать.

user10245 10 май '11 в 21:36 2011-05-10 21:36 · Answer 15 · 2011-05-10 21:36

Вот пример, который включает инициализацию show /hide, чтобы соответствовать состоянию флажка при загрузке страницы; принимая во внимание тот факт, что Firefox запоминает состояние флажков при обновлении страницы, но не запоминает состояние показанных / скрытых элементов.

$(function() {
    // initialise visibility when page is loaded
    $('tr.invoiceItemRow').toggle($('#showInvoiceItems').attr('checked'));
    // attach click handler to checkbox
    $('#showInvoiceItems').click(function(){ $('tr.invoiceItemRow').toggle(this.checked);})
});

(с помощью других ответов на этот вопрос)

user1325547 25 фев '13 в 02:26 2013-02-25 02:26 · Answer 16 · 2013-02-25 02:26

Это был мой обходной путь:

$('#vcGoButton').click(function () {
    var buttonStatus = $('#vcChangeLocation').prop('checked');
    console.log("Status is " + buttonStatus);
    if (buttonStatus) {
        var address = $('#vcNewLocation').val();
        var cabNumber = $('#vcVehicleNumber').val();
        $.get('postCabLocation.php',
              {address: address, cabNumber: cabNumber},
              function(data) {
                  console.log("Changed vehicle " + cabNumber + " location to " + address );
              });
    }
    else {
        console.log("VC go button clicked, but no location action");
    }
});

user1944063 22 апр '14 в 02:31 2014-04-22 02:31 · Answer 17 · 2014-04-22 02:31

Сеттер:

$("#chkmyElement")[0].checked = true;

Getter:

if($("#chkmyElement")[0].checked) {
   alert("enabled");
} else {
   alert("disabled");
}

10

Источник

user1944063 22 апр '14 в 02:31

27 май '21 в 11:53 2021-05-27 11:53 · Answer 18 · 2021-05-27 11:53

Метод jQuery prop() предоставляет простой, эффективный и надежный способ отслеживать текущий статус флажка. Он работает очень хорошо во всех условиях, потому что каждый флажок имеет свойство checked, которое указывает его статус отмечен или не отмечен .

Не поймите неправильно с отмеченным атрибутом. Атрибут checked определяет только начальное состояние флажка, но не текущее состояние. Посмотрим, как это работает:

      <script>
    $(document).ready(function(){
        $('input[type="checkbox"]').click(function(){
            if($(this).prop("checked") == true){
                console.log("Checkbox is checked.");
            }
            else if($(this).prop("checked") == false){
                console.log("Checkbox is unchecked.");
            }
        });
    });
</script>

Для подробного объяснения: jQuery prop()

Однако вы также можете использовать функцию is() jQuery.

      if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // Age is selected - Show the Age
else
    $("#txtAge").hide();  // Age is not selected - Hide the Age

user902960 23 янв '13 в 16:40 2013-01-23 16:40 · Answer 19 · 2013-01-23 16:40

Использование:

$(this).toggle($("input:checkbox", $(this))[0].checked);

Когда вы выбираете вне контекста, помните, что вам нужно [0], чтобы получить доступ к флажку.

9

Источник

user902960 23 янв '13 в 16:40

user665783 18 май '17 в 23:03 2017-05-18 23:03 · Answer 20 · 2017-05-18 23:03

Я использую jQuery 1.11.1, и у меня были проблемы с установкой и чтением значения флажка.

Я наконец решил это с помощью этих двух функций:

function setCheckboxValue(checkBoxId, checked) {
    if (checkBoxId && (checked === true || checked === false)) {
        var elem = $('#' + checkBoxId);
        if (checked === true) {
            elem.attr('checked', 'checked');
        } else {
            elem.removeAttr('checked');
        }
    }
}

function isChecked(checkBoxId) {
    return $('#' + checkBoxId).attr('checked') != null;
}

Он может выглядеть немного грязным, но он решает все проблемы с проводной связью, которые у меня возникали в разных типах браузеров.

user2293686 03 сен '15 в 17:42 2015-09-03 17:42 · Answer 21 · 2015-09-03 17:42

Попробуй это,

$('#isAgeSelected').click(function() {
    if(this.checked){
        $("#txtAge").show();
    } else{
        $("#txtAge").hide();
    } 
});

8

Источник

user2293686 03 сен '15 в 17:42

user86388 30 авг '14 в 10:36 2014-08-30 10:36 · Answer 22 · 2014-08-30 10:36

Я бы на самом деле предпочел change событие.

$('#isAgeSelected').change(function() {
    $("#txtAge").toggle(this.checked);
});

Демо Фиддл

8

Источник

user86388 30 авг '14 в 10:36

user1036639 29 мар '15 в 21:45 2015-03-29 21:45 · Answer 23 · 2015-03-29 21:45

Селектор возвращает несколько объектов, и он должен взять первый элемент в массиве:

// Collection
var chckremember = $("#chckremember");


// Result boolen
var ischecked=chckremember[0].checked;

8

Источник

user1036639 29 мар '15 в 21:45

user9522666 29 мар '19 в 02:54 2019-03-29 02:54 · Answer 24 · 2019-03-29 02:54

Вы можете попробовать этот код:

$('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#txtAge").show();
    } else {
       $("#txtAge").hide();
   }
});

7

Источник

user9522666 29 мар '19 в 02:54

user1996628 21 янв '13 в 09:53 2013-01-21 09:53 · Answer 25 · 2013-01-21 09:53

if( undefined == $('#isAgeSelected').attr('checked') ) {
    $("#txtAge").hide();
} else {
    $("#txtAge").show();
}

6

Источник

user1996628 21 янв '13 в 09:53

user6767275 01 окт '22 в 10:48 2022-10-01 10:48 · Answer 26 · 2022-10-01 10:48

      $(document).on('change', '#isAgeSelected', function() {

    if($(this).is(":checked")){

       $('#txtAge').hide();
    }
    else
    {
        $('#txtAge').hide();
    }
});

6

Источник

user6767275 01 окт '22 в 10:48

user2789533 09 дек '19 в 03:19 2019-12-09 03:19 · Answer 27 · 2019-12-09 03:19

Привет, ты можешь использовать простой Javascript, вот так:

document.getElementById('checkboxOption').addEventListener('click',      
   event => console.log(event.target.checked)
);

<label><input type="checkbox" id="checkboxOption">Check Option</label>

6

Источник

user2789533 09 дек '19 в 03:19

user860099 28 авг '19 в 07:39 2019-08-28 07:39 · Answer 28 · 2019-08-28 07:39

В чистом состоянии JS флажок легче читать

isAgeSelected.checked

function check() {
  txtAge.style.display= isAgeSelected.checked ? 'block':'none';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Age <input type="checkbox" id="isAgeSelected"/>

<button onclick="check()">Check</button>

<div id="txtAge" style="display:none">
Age is selected
</div>

4

Источник

user860099 28 авг '19 в 07:39

user8009701 03 сен '18 в 06:56 2018-09-03 06:56 · Answer 29 · 2018-09-03 06:56

Мне нужно проверить проверенное свойство флажка и выполнить действие на основе проверенного свойства с помощью jQuery.

EX -

1) Запустите при загрузке, чтобы получить значение флажка, если флажок возраста установлен, тогда мне нужно показать текстовое поле для ввода возраста, иначе скрыть текстовое поле.

2) если флажок возраста установлен, то мне нужно показать текстовое поле для ввода возраста, иначе скрыть текстовое поле, используя событие щелчка флажка.

поэтому код не возвращает false по умолчанию:

Попробуйте следующее:

<html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        </head>
        <body>
            <h1>Jquery Demo</h1>
            <input type="checkbox" name="isAge" checked id="isAge"> isAge <br/>
            <div id="Age" style="display:none">
              <label>Enter your age</label>
              <input type="number" name="age">
            </div>
            <script type="text/javascript">
            if(document.getElementById('isAge').checked) {
                $('#Age').show();
            } else {
                $('#Age').hide();
            }   
            $('#isAge').click(function() {
                if(document.getElementById('isAge').checked) {
                    $('#Age').show();
                } else {
                    $('#Age').hide();
                }
            }); 
            </script>
        </body>
    </html>

Вот измененная версия: https://jsfiddle.net/sedhal/0hygLtrz/7/

user3042117 30 сен '16 в 10:30 2016-09-30 10:30 · Answer 30 · 2016-09-30 10:30

Как насчет этого решения?

$("#txtAge")[
    $("#isAgeSelected").is(':checked') ?
    'show' :
    'hide'
]();

4

Источник

user3042117 30 сен '16 в 10:30