jquery - 複数 - チェックボックス チェックする




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

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

チェックボックスのDOM要素のcheckedプロパティは、要素の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を使ってチェックされたプロパティに基づいてアクションを実行する必要があります。

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

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

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

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


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

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

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

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

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
}

1)あなたのHTMLマークアップが:

<input type="checkbox"  />

使用されたattr:

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

propを使用する場合:

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

使用されたattr:

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

使用されるプロップ:

$(element).prop("checked") // Will return true whether checked="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行きます。


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

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

この例はボタン用です。

以下を試してください:

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

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

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

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

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

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


これは私のために働く:

/* isAgeSelected being id for checkbox */

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

つかいます:

<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を使って確認する方法

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

例を確認してください。


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

<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要素をフェードアウトします。


問題の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セレクタを考えることができます。

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


私は、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イベントに、チェックボックスがonchangeているかどうかをチェックし、年齢のテキストフィールドのhiddenプロパティを適切に設定する関数を割り当てます。 その例では、三項演算子を使用します。

あなたがそれをテストするためのfiddleです。

補遺

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

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

ブラウザは遅くなりますが、ブラウザ間での互換性があります。


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

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

私はこれを使用しており、これは絶対にうまく動作しています:

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

注意:チェックボックスがチェックされている場合は、それ以外の場合はtrueを返します。したがって、「TRUE」値をよく確認してください。


私はそれが単純なものになると思う

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

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

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

入力がチェックされてfalse場合はtruetrueない場合はfalse返しtrue





checkbox