Проверьте, установлен ли флажок с помощью jQuery

966

Как проверить, установлен ли флажок в блоке checkbox с помощью идентификатора блока checkbox?

Я использую следующий код, но он всегда возвращает количество отмеченных флажков независимо от идентификатора.

function isCheckedById(id) {
  alert(id);
  var checked = $("input[@id=" + id + "]:checked").length;
  alert(checked);

  if (checked == 0) {
    return false;
  } else {
    return true;
  }
}
  • 0
    Массив флажков ? Никогда не слышал о такой вещи. Это что-то специфичное для JQuery, или плагин / виджет?
  • 2
    массив флажков означает что-то вроде: <input type = "checkbox" name = "chk []" id = "chk []" value = "apple"> <input type = "checkbox" name = "chk []" id = "chk []" value = "banana"> <input type = "checkbox" name = "chk []" id = "chk []" value = "orange"> и т. д.
Показать ещё 6 комментариев
Теги:
checkbox

20 ответов

560
Лучший ответ

Идентификаторы должны быть уникальными в вашем документе, что означает, что вы не должны делать это:

<input type="checkbox" name="chk[]" id="chk[]" value="Apples" />
<input type="checkbox" name="chk[]" id="chk[]" value="Bananas" />

Вместо этого отпустите идентификатор, а затем выберите их по имени или содержащему элемент:

<fieldset id="checkArray">
    <input type="checkbox" name="chk[]" value="Apples" />

    <input type="checkbox" name="chk[]" value="Bananas" />
</fieldset>

И теперь jQuery:

var atLeastOneIsChecked = $('#checkArray:checkbox:checked').length > 0;
//there should be no space between identifier and selector

// or, without the container:

var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;
  • 0
    У меня работало без двойных кавычек на вводимом имени: input [name = multiplecheck []]: проверено, спасибо!
  • 24
    Зачем использовать $('#checkArray :checkbox:checked').length > 0; когда более простой $('#checkArray').checked работает и доступен в других версиях?
Показать ещё 4 комментария
1729
$('#' + id).is(":checked")

Это произойдет, если флажок установлен.

Для массива флажков с тем же именем вы можете получить список проверенных:

var $boxes = $('input[name=thename]:checked');

Затем прокрутите их и посмотрите, что вы проверили:

$boxes.each(function(){
    // Do stuff here with this
});

Чтобы узнать, сколько проверок вы можете сделать:

$boxes.length;
  • 0
    хм .. Как узнать, сколько проверено в этом массиве флажков?
  • 0
    просто отредактировал его, чтобы найти проверенный номер.
Показать ещё 11 комментариев
248
$('#checkbox').is(':checked'); 

Приведенный выше код возвращает true, если флажок установлен или false, если нет.

  • 5
    очень полезно при использовании $ (this) .is (': флажок'); Спасибо!
  • 0
    Да, единственное решение, которое работает с $ (это)!
Показать ещё 2 комментария
78

Полезны все следующие методы:

$('#checkbox').is(":checked")

$('#checkbox').prop('checked')

$('#checkbox')[0].checked

$('#checkbox').get(0).checked

Рекомендуется, чтобы DOMelement или inline "this.checked" следует избегать, вместо этого jQuery в методе должен использоваться прослушиватель событий.

66

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

if($('input[name="checkBoxName"]').is(':checked'))
{
  // checked
}else
{
 // unchecked
}

В качестве альтернативы:

if($('input[name="checkBoxName"]:checked'))
{
    // checked
}else{
  // unchecked
}
  • 3
    Первое решение отсутствует : ... Правильное решение: if(('input[name="checkBoxName"]').is(':checked')) .
  • 0
    Отсутствует знак доллара ($), это должно быть, if($('input[name="checkBoxName"]').is(':checked')) .
56

Самое важное понятие, которое нужно запомнить об проверяемом атрибуте, - это что он не соответствует проверенному свойству. Атрибут фактически соответствует свойству defaultChecked и должен использоваться только для установки начального значения флажка. Проверенный атрибут значение не изменяется с состоянием флажка, в то время как проверено свойство. Таким образом, совместимый с кросс-браузером способ определить, установлен ли флажок, использовать свойство

Возможны все ниже методы

elem.checked 

$(elem).prop("checked") 

$(elem).is(":checked") 
31

Вы можете использовать этот код,

if($("#checkboxId").is(':checked')){
     // Code in the case checkbox is checked.
} else {
     // Code in the case checkbox is NOT checked.
}
27

Вы можете попробовать следующее:

<script>
function checkAllCheckBox(value)
{
   if($('#select_all_').is(':checked')){
   $(".check_").attr ( "checked" ,"checked" );
    }
    else
    {
        $(".check_").removeAttr('checked');
    }

 }

</script>
<input type="checkbox" name="chkbox" id="select_all_" value="1" />


<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
24

В соответствии с документацией jQuery есть следующие способы проверить, установлен ли флажок. Давайте рассмотрим флажок, например (Check Work jsfiddle со всеми примерами)

<input type="checkbox" name="mycheckbox" id="mycheckbox" />
<br><br>
<input type="button" id="test-with-checked" value="Test with checked" />
<input type="button" id="test-with-is" value="Test with is" />
<input type="button" id="test-with-prop" value="Test with prop" />

Пример 1 - с отмеченным

$("#test-with-checked").on("click", function(){
    if(mycheckbox.checked) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

Пример 2 - с jQuery есть, ПРИМЕЧАНИЕ -: отмечен

var check;
$("#test-with-is").on("click", function(){
    check = $("#mycheckbox").is(":checked");
    if(check) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

Пример 3 - с поддержкой jQuery

var check;
$("#test-with-prop").on("click", function(){
    check = $("#mycheckbox").prop("checked");
    if(check) {
         alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

Проверить работу jsfiddle

21

Вы можете использовать любой из следующих рекомендуемых кодов с помощью jquery.

if ( elem.checked ) {};
if ( $( elem ).prop( "checked" ) ) {};
if ( $( elem ).is( ":checked" ) ) {};
10

Вы можете сделать это просто:

Рабочая скрипта

HTML

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

JQuery

$(document).ready(function () {
    var ckbox = $('#checkbox');

    $('input').on('click',function () {
        if (ckbox.is(':checked')) {
            alert('You have Checked it');
        } else {
            alert('You Un-Checked it');
        }
    });
});

или даже проще,

$("#checkbox").attr("checked") ? alert("Checked") : alert("Unchecked");

Если отмечен checkbox, он вернет true иначе undefined

  • 0
    or even simpler; -> $("#checkbox").checked
7

Простая демонстрация для проверки и установки флажка.

jsfiddle!

$('.attr-value-name').click(function() {
    if($(this).parent().find('input[type="checkbox"]').is(':checked'))
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', false);
    }
    else
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', true);
    }
});
5

Я знаю, что OP хочет jquery, но в моем случае чистый JS был ответом, поэтому, если кто-то вроде меня здесь и не имеет jquery или не хочет его использовать, вот ответ JS:

document.getElementById("myCheck").checked

Он возвращает true, если вход с идентификатором myCheck проверен и false, если он не установлен.

Просто как тот.

  • 3
    это означает, что $("#myCheck")[0].checked будет работать в jquery! : D
5

Просто, чтобы сказать, что в моем примере ситуация была диалоговым окном, которое затем проверило флажок перед закрытием диалога. Ничего выше и Как проверить, установлен ли флажок в jQuery? и jQuery, если флажок установлен. также не работают.

В конце

<input class="cb" id="rd" type="checkbox">
<input class="cb" id="fd" type="checkbox">

var fd=$('.cb#fd').is(':checked');
var rd= $('.cb#rd').is(':checked');

Это сработало так, чтобы вызвать класс, а затем идентификатор. а не только идентификатор. Это может быть связано с вложенными элементами DOM на этой странице, что вызывает проблему. Обходной путь был выше.

5

Для флажка с идентификатором

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

вы можете просто сделать

$("#id_input_checkbox13").prop('checked')

вы получите true или false в качестве возвращаемого значения для синтаксиса выше. Вы можете использовать его в условии if как нормальное логическое выражение.

4

Собственно, согласно jsperf.com, операции DOM быстрей, затем $(). prop(), за которыми следует $(). есть()!!

Вот синтаксисы:

var checkbox = $('#'+id);
/* OR var checkbox = $("input[name=checkbox1]"); whichever is best */

/* The DOM way - The fastest */
if(checkbox[0].checked == true)
   alert('Checkbox is checked!!');

/* Using jQuery .prop() - The second fastest */
if(checkbox.prop('checked') == true)
   alert('Checkbox is checked!!');

/* Using jQuery .is() - The slowest in the lot */
if(checkbox.is(':checked') == true)
   alert('Checkbox is checked!!');

Я лично предпочитаю .prop(). В отличие от .is(), его также можно использовать для установки значения.

4
Флажок

Toggle отмечен

$("#checkall").click(function(){
    $("input:checkbox").prop( 'checked',$(this).is(":checked") );
})
4

Что-то вроде этого может помочь

togglecheckBoxs =  function( objCheckBox ) {

    var boolAllChecked = true;

    if( false == objCheckBox.checked ) {
        $('#checkAll').prop( 'checked',false );
    } else {
        $( 'input[id^="someIds_"]' ).each( function( chkboxIndex, chkbox ) {
            if( false == chkbox.checked ) {
                $('#checkAll').prop( 'checked',false );
                boolAllChecked = false;
            }
        });

        if( true == boolAllChecked ) {
            $('#checkAll').prop( 'checked',true );
        }
    }
}
0

Используя этот код, вы можете проверить, что по крайней мере один флажок установлен или нет в разных группах или нескольких флажках. Используя это, вы не можете требовать удаления идентификаторов или динамических идентификаторов. Этот код работает с одинаковыми идентификаторами.

Ссылка ссылки

<label class="control-label col-sm-4">Check Box 2</label>
    <input type="checkbox" name="checkbox2" id="checkbox21" value=ck1 /> ck1<br />
    <input type="checkbox" name="checkbox2" id="checkbox22" value=ck2 /> ck2<br />

<label class="control-label col-sm-4">Check Box 3</label>
    <input type="checkbox" name="checkbox3" id="checkbox31" value=ck3 /> ck3<br />
    <input type="checkbox" name="checkbox3" id="checkbox32" value=ck4 /> ck4<br />

<script>
function checkFormData() {
    if (!$('input[name=checkbox2]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
        return false;
    }
    if (!$('input[name=checkbox3]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 3 can not be null";
        return false;
    }
    alert("Success");
    return true;
}
</script>
  • 0
    Основная информация: идентификаторы html-элементов не повторяются (например: id = "checkbox2", id = "checkbox3"). Это не очень хорошая практика. Мы можем использовать класс несколько раз на странице.
  • 0
    @ AnandSomasekhar Хорошо, спасибо.
-3

используйте код ниже

<script>

$(document).ready(function () {
  $("[id$='chkSendMail']").attr("onchange", "ShowMailSection()");
}

function ShowMailSection() {
  if ($("[id$='chkSendMail'][type='checkbox']:checked").length >0){
      $("[id$='SecEmail']").removeClass("Hide");
  }
</script>
  • 0
    В самом деле? Как насчет $(function() { $("[id$='chkSendMail']").on("change", ShowMailSection); });
  • 0
    И все они являются флажками, поэтому $("[id$='chkSendMail']:checked]") должно работать нормально

Ещё вопросы

Сообщество Overcoder
Наверх
Меню