取得 数jQueryでチェックボックスがチェックされているかどうかを確認するには?



15 Answers

jQueryのis()関数を使う:

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked
jquery チェックボックス 外す

私はチェックボックスのチェックされたプロパティをチェックし、jQueryを使ってチェックされたプロパティに基づいてアクションを実行する必要があります。

たとえば、年齢チェックボックスがチェックされている場合は、年齢を入力するテキストボックスを表示し、テキストボックスを非表示にする必要があります。

しかし、次のコードはデフォルトでfalseを返します。

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

checkedプロパティを正常にクエリするにはどうすればいいですか?




jQuery 1.6+

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

jQuery 1.5以下

$('#isAgeSelected').attr('checked')

jQueryのすべてのバージョン

// Assuming an event handler on a checkbox
if (this.checked)

すべての信用はXian行きます。




つかいます:

<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

$("#planned_checked").change(function() {
    if($(this).prop('checked')) {
        alert("Checked Box Selected");
    } else {
        alert("Checked Box deselect");
    }
});

    $("#planned_checked").change(function() {
        if($(this).prop('checked')) {
            alert("Checked Box Selected");
        } else {
            alert("Checked Box deselect");
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned




これは私のために働いた:

$get("isAgeSelected ").checked == true

isAgeSelectedはコントロールのIDです。

また、@ karim79のanswerはうまくいきます。 私はそれをテストしたときに私が逃したものがわからない。

注:これは、Microsoft Ajaxを使用した回答であり、jQueryでは使用していません。




checkboxプロパティのClickイベントハンドラの使用は信頼できません。これは、 checkedプロパティがイベントハンドラ自体の実行中に変更さchecked可能性があるためです。

理想的には、チェックボックスの値が変更されるたびに(変更の仕方に関係なく)起動されるなど、 changeイベントハンドラにコードを挿入するのが理想的です。

$('#isAgeSelected').bind('change', function () {

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



私はあなたがこれを行うことができると信じている:

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}



私はまったく同じ問題に走った。 私はASP.NETチェックボックスを持っています

<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />

jQueryコードでは、チェックボックスがチェックされているかどうかをチェックするために次のセレクタを使用しました。これは魅力的なように動作するようです。

if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

あなたはCssClassの代わりにIDを使うこともできますが、

if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

これがあなたに役立つことを願っています




これは同じことをするいくつかの異なる方法です:

$(document).ready(function (){

    $('#isAgeSelected').click(function() {
        // $("#txtAge").toggle(this.checked);

        // Using a pure CSS selector
        if ($(this.checked)) {
            alert('on check 1');
        };

        // Using jQuery's is() method
        if ($(this).is(':checked')) {
            alert('on checked 2');
        };

        //  // Using jQuery's filter() method
        if ($(this).filter(':checked')) {
            alert('on checked 3');
        };
    });
});
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>




このコードを使用することができます:

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



$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});



あなたが使用することができます:

  if(document.getElementById('isAgeSelected').checked)
    $("#txtAge").show();  
  else
    $("#txtAge").hide();
if($("#isAgeSelected").is(':checked'))
  $("#txtAge").show();  
else
  $("#txtAge").hide();

どちらもうまくいくはずです。




トップの答えは私のためにそれをしませんでした。 これはやった:

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

        $("#li_13").click(function(){
            if($("#agree").attr('checked')){
                $("#saveForm").fadeIn();
            }
            else
            {
                $("#saveForm").fadeOut();
            }
        });
    });
</script>

基本的に、要素#li_13がクリックされると、要素#attが一致するかどうか(チェックボックス)が.attr('checked')関数を使用してチェックされているかどうかがチェックされます。 そうであれば#saveForm要素をフェードインし、そうでなければsaveForm要素をフェードアウトします。




トグル: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');
    };
});



問題のJavaScriptソリューションを提案しましたが( checkboxオンにするとtextbox表示されchecked )、この問題はCSSだけで解決できます。 この方法では、JavaScriptを無効にしているユーザーのフォームが機能します。

あなたが次のHTMLを持っていると仮定します:

<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />

次のCSSを使用して、目的の機能を実現できます。

 #show_textbox:not(:checked) + input[type=text] {display:none;}

他のシナリオでは、適切なCSSセレクタを考えることができます。

このアプローチを実証するためのフィドルです。




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

または

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



Related