web-dev-qa-db-ja.com

チェックボックスがjQueryでチェックされているか確認する

チェックボックス配列のIDを使用してチェックボックス配列内のチェックボックスがチェックされているかどうかを確認する方法

私は以下のコードを使用していますが、チェックされたチェックボックスの数をIDに関係なく常に返します。

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

  if (checked == 0) {
    return false;
  } else {
    return true;
  }
}
javascriptjquerycheckbox
1000
Jake

IDはドキュメント内で一意でなければなりません。つまり、 はいけません 

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

代わりに、IDを削除してから、名前またはそれを含む要素でそれらを選択します。

<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;
613
nickf
$('#' + id).is(":checked")

チェックボックスがチェックされていればそれは得られます。

同じ名前のチェックボックスの配列のためにあなたはチェックされたもののリストを得ることができます：

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

それからそれらをループして、あなたができることが確認されたものを見るために：

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

いくつチェックされているかを調べるには、次のようにします。

$boxes.length;
1809
John Boker
$('#checkbox').is(':checked');

上記のコードは、チェックボックスがチェックされている場合はtrueを返し、そうでない場合はfalseを返します。

259
Prasanna Rotti

以下のすべての方法が便利です。

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

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

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

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

メソッドのjQueryをイベントリスナとして使用するのではなく、DOMelementまたはインラインの "this.checked"を避けることをお勧めします。

91
justnajm

チェックボックスがチェックされているかどうかをチェックするjQueryコード：

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

あるいは

if($('input[name="checkBoxName"]:checked'))
{
    // checked
}else{
  // unchecked
}
78
Kundan roy

Checked属性について覚えておくべき最も重要な概念はそれがcheckedプロパティに対応していないということです。属性は実際にはdefaultCheckedプロパティに対応しており、チェックボックスの初期値を設定するためにのみ使用する必要があります。 checked属性の値はチェックボックスの状態によって変化しませんが、 checkedプロパティは変化します。したがって、チェックボックスがチェックされているかどうかを決定するするためのブラウザ間互換の方法は、プロパティを使用することです。

以下のすべての方法が可能です

elem.checked 

$(elem).prop("checked") 

$(elem).is(":checked")
60
Techie

このコードを使うことができます

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

JQueryによると ドキュメント チェックボックスがチェックされているかどうかをチェックするには以下の方法があります。例えばチェックボックスを考えてみましょう（すべての例でCheck Working 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の場合、NOTE - ：チェックあり

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 propを使用 

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

動作確認 jsfiddle

26
Subodh Ghulaxe

これを試すことができます：

<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" />
26
Vishnu Sharma

Jqueryでは、以下の推奨コードのいずれかを使用できます。

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

私はOPがjqueryを望んでいることを知っていますが、私の場合純粋なJSが答えでした。

document.getElementById("myCheck").checked

ID myCheckの入力がチェックされた場合はtrueを返し、チェックされていない場合はfalseを返します。

そのような単純な。

10
Combine

あなたはそれを簡単にすることができます。

Working Fiddle

_ 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");

checkboxname__がチェックされている場合はtruename__が返され、それ以外の場合はundefinedname__が返されます。

10
Aamir Shahzad

チェックボックスをチェックおよび設定するための簡単なデモ。

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);
    }
});
7
An Illusion

ID付きのチェックボックス

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

簡単にできる

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

上記の構文の戻り値としてtrueまたはfalseが得られます。通常のブール式としてif節で使用できます。

5
Aniket Thakur

ちょうど私の例で言うと、状況はダイアログボックスを閉じる前にチェックボックスを検証したダイアログボックスでした。上記のどれもおよび 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');

これはうまくいったので、クラスを呼び出してからIDを呼び出します。 IDだけではなくこのページにネストされたDOM要素が問題を引き起こしている可能性があります。回避策は上記のとおりです。

5
Vahid

切り替えチェックボックス

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

このようなものは助けることができます

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 );
        }
    }
}
4
darhamid

実際には、 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
BlackPanther

このコードを使用すると、少なくとも1つのチェックボックスが選択されているか、異なるチェックボックスグループまたは複数のチェックボックスからチェックされていないかを確認できます。このコードは同じIDで機能します。

参照先 リンク

<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
Parth Patel

2019年半ばなので、jQueryはVueJS、Reactなどの後部座席を取ることがあります。これは純粋なVanilla Javascript onload listenerオプションです。

<script>
  // Replace 'admincheckbox' both variable and ID with whatever suits.

  window.onload = function() {
    const admincheckbox = document.getElementById("admincheckbox");
    admincheckbox.addEventListener('click', function() {
      if(admincheckbox.checked){
        alert('Checked');
      } else {
        alert('Unchecked');
      }
    });
  }
</script>
0
Grant