jQueryでチェックボックスがオンになっているかどうかを確認するにはどうすればよいですか？

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

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

ただし、次のコードはfalseデフォルトで戻ります。

if ($('#isAgeSelected').attr('checked'))
{
    $("#txtAge").show();
}
else
{
    $("#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">
Age is selected
</div>

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

チェックされたプロパティを正常にクエリするにはどうすればよいですか？

checkedチェックボックスDOM要素のプロパティは、要素のchecked状態を示します。

既存のコードを考えると、これを行うことができます：

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

ただし、これを行うには、次の方法を使用したよりきれいな方法がありますtoggle。

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

<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">Age is something</div>

jQueryのis（）関数を使用します。

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

jQueryの使用> 1.6

<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" />

// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true

新しいプロパティメソッドの使用：

if($('#checkMeOut').prop('checked')) {
    // something when checked
} else {
    // something else when not
}

jQuery 1.6以降

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

jQuery 1.5以下

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

jQueryの任意のバージョン

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

すべてのクレジットは西安に行きます。

私はこれを使用していますが、これはまったく問題なく動作しています。

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

注：チェックボックスをオンにすると、それ以外の場合は未定義のtrueが返されるため、「TRUE」値を確認することをお勧めします。

使用する：

<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

jQuery 1.6以降、の動作jQuery.attr()は変更されており、要素のチェック済み状態を取得するためにそれを使用しないことをお勧めします。代わりに、以下を使用する必要がありますjQuery.prop()。

$("#txtAge").toggle(
    $("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
                                        // Return value changes with checkbox state
);

他に2つの可能性があります。

$("#txtAge").get(0).checked
$("#txtAge").is(":checked")

これは私のために働きました：

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

isAgeSelectedコントロールのIDはどこにありますか。

また、@ karim79の答えはうまくいきます。テストしたときに何を逃したのかわかりません。

注、これはjQueryではなくMicrosoft Ajaxを使用した答えです

jqueryの更新バージョンを使用している場合は.prop、問題を解決するための方法を見つける必要があります。

$('#isAgeSelected').prop('checked')trueチェックされているfalse場合とチェックされていない場合に戻ります。私はそれを確認し、私はこの問題を先に見つけました。$('#isAgeSelected').attr('checked')そして、状況にふさわしい答えではない、$('#isAgeSelected').is('checked')戻ってきてundefinedいます。以下のようにしてください。

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

それが役に立てば幸い:)-ありがとう。

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

理想的にchangeは、チェックボックスの値が変更されるたびに（その方法に関係なく）起動されるように、コードをイベントハンドラーに配置することをお勧めします。

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

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

使用する：

<input type="checkbox" id="abc" value="UDB">UDB
<input type="checkbox" id="abc" value="Prasad">Prasad

$('input#abc').click(function(){
  if($(this).is(':checked'))
  {
    var checkedOne=$(this).val()
    alert(checkedOne);

    // Do some other action
  }
})

これは、チェックを外したときではなく、ボックスをチェックしたときにのみ必要なアクションを実行する必要がある場合に役立ちます。

私は、jQueryなしでまったく同じことを行う方法についての回答を投稿することにしました。私が反逆者だからです。

var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');

// Just because of IE <333
ageCheckbox.onchange = function() {
    // Check if the checkbox is checked, and show/hide the text field.
    ageInput.hidden = this.checked ? false : true;
};

まず、両方の要素をIDで取得します。次に、チェックボックスのonchangeイベントに、チェックボックスがチェックされたかどうかをチェックしhidden、年齢テキストフィールドのプロパティを適切に設定する関数を割り当てます。その例では、三項演算子を使用しています。

これをテストするためのフィドルです。

補遺

ブラウザー間の互換性が問題になる場合は、CSS displayプロパティをnoneおよびinlineに設定することをお勧めします。

elem.style.display = this.checked ? 'inline' : 'none';

低速ですが、ブラウザ間の互換性があります。

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

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 { ... }

これがお役に立てば幸いです。

チェックボックスがチェックされているかどうかをチェックするには、多くの方法があります。

jQueryを使用して確認する方法

if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))

例またはドキュメントも確認してください。

• http://api.jquery.com/attr/

• http://api.jquery.com/prop/

このコードはあなたを助けます

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

これは私にとってはうまくいきます：

/* isAgeSelected being id for checkbox */

$("#isAgeSelected").click(function(){
  $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});

これは、同じことを行ういくつかの異なる方法です。

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

これを使って：

if ($('input[name="salary_in.Basic"]:checked').length > 0)

チェックボックスがオンになっている場合、長さはゼロより大きいです。

これを行う私の方法は：

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}

$(selector).attr('checked') !== undefined

これはtrue、入力がチェックされているfalse場合とチェックされていない場合に戻ります。

$(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();

どちらも機能するはずです。

1）HTMLマークアップが次の場合：

<input type="checkbox"  />

使用される属性：

$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set

プロップを使用する場合：

$(element).prop("checked"); // Will give you false whether or not initial value is set

2）HTMLマークアップが次の場合：

 <input type="checkbox"  checked="checked" />// May be like this also  checked="true"

使用される属性：

$(element).attr("checked") // Will return checked whether it is checked="true"

使用される支柱：

$(element).prop("checked") // Will return true whether checked="checked"

この例はボタン用です。

以下を試してください：

<input type="button" class="check" id="checkall" value="Check All" />  &nbsp; <input type="button" id="remove" value="Delete" /> <br/>

<input type="checkbox" class="cb-element"  value="1" /> Checkbox  1 <br/>
<input type="checkbox" class="cb-element"  value="2" /> Checkbox  2 <br/>
<input type="checkbox" class="cb-element"  value="3" /> Checkbox  3 <br/>


$('#remove').attr('disabled', 'disabled'); 

$(document).ready(function() {  

    $('.cb-element').click(function() {

        if($(this).prop('checked'))
        {
            $('#remove').attr('disabled', false);
        }
        else
        {
            $('#remove').attr('disabled', true);
        }
    });   

    $('.check:button').click(function()
{
    var checked = !$(this).data('checked');
    $('input:checkbox').prop('checked', checked);
    $(this).data('checked', checked);

    if(checked == true)
    {
        $(this).val('Uncheck All');
         $('#remove').attr('disabled', false);
    }

    else if(checked == false)
    {
        $(this).val('Check All');
        $('#remove').attr('disabled', true);
    }
});
});

一番上の答えは私にはそれをしませんでした。しかし、これはしました：

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

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

基本的に、要素＃li_13がクリックされると、.attr('checked')関数を使用して、要素の同意（チェックボックス）がチェックされているかどうかがチェックされます。フェードインの場合は#saveForm要素、フェードアウトでない場合はsaveForm要素。

私はこれを使用しています：

 <input type="checkbox" id="isAgeSelected" value="1" /> <br/>
 <input type="textbox" id="txtAge" />

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

あなたの問題（aがのtextboxときにaを表示する）のJavaScriptソリューションを提案しましたcheckboxが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セレクターを考えることができます。

これがこのアプローチを示すフィドルです。

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

簡単だと思います

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