web-dev-qa-db-ja.com

JQueryでチェックボックスに "checked"を設定する？

jQuery を使用してcheckboxをチェックするには、次のようにします。

$(".myCheckBox").checked(true);

または

$(".myCheckBox").selected(true);

そんなことはありますか？

javascriptjquerycheckboxselectedchecked
3857
tpower

jQuery 1.6以上

新しい .prop() メソッドを使います。

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

jQuery 1.5.x以下

.prop()メソッドは利用できないので、あなたは .attr() を使う必要があります。

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

これは バージョン1.6より前のjQueryの単体テストで使用されていたアプローチ であり、使用することをお勧めします。

$('.myCheckbox').removeAttr('checked');

ボックスが最初にチェックされていた場合、後者はそれを含む任意の形式で .reset() への呼び出しの振る舞いを変更するでしょう - 微妙だがおそらく望ましくない振る舞いの変更。

より詳しい文脈のために、1.5.xから1.6への移行におけるchecked属性/プロパティの取り扱いへの変更の不完全な議論は バージョン1.6リリースノート と 属性vsで見つけることができます。プロパティ .prop()ドキュメント のセクション。

すべてのバージョンのjQuery

1つの要素だけで作業している場合は、いつでも HTMLInputElement の.checkedプロパティを変更するだけで済みます。

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

これの代わりに.prop()と.attr()メソッドを使うことの利点はそれらがマッチしたすべての要素で動作することです。

5626
Xian

つかいます：

$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);

また、チェックボックスがチェックされているかどうかを確認したい場合は、

$('.myCheckbox').is(':checked');
660
bchhun

これはクロスプラットフォーム標準であり、willはフォームの再投稿を許可するため、jQueryでチェックボックスをオンまたはオフにする正しい方法です。

$('.myCheckBox').each(function(){ this.checked = true; });

$('.myCheckBox').each(function(){ this.checked = false; });

これにより、チェックボックスのチェックとチェック解除にJavaScript標準を使用しているため、チェックボックス要素の「checked」プロパティを適切に実装するブラウザは、このコードを問題なく実行します。これはすべての主要なブラウザである必要がありますが、Internet Explorer 9より前のバージョンではテストできません。

問題（jQuery 1.6）：

ユーザーがチェックボックスをクリックすると、そのチェックボックスは「チェック済み」属性の変更への応答を停止します。

以下は、誰かがチェックボックスをクリックした後にジョブを実行できないチェックボックス属性の例です（これはChromeで発生します）。

フィドル

解決策：

DOM 要素でJavaScriptの「checked」プロパティを使用することで、DOMを操作してwantやること。

Fiddle

このプラグインは、jQueryによって選択された要素のチェック済みプロパティを変更し、すべての状況下でチェックボックスを正常にオンまたはオフにします。したがって、これは非常に重要なソリューションのように見えますが、サイトのユーザーエクスペリエンスが向上し、ユーザーのフラストレーションを防ぐのに役立ちます。

(function( $ ) {
    $.fn.checked = function(value) {
        if(value === true || value === false) {
            // Set the value of the checkbox
            $(this).each(function(){ this.checked = value; });
        } 
        else if(value === undefined || value === 'toggle') {
            // Toggle the checkbox
            $(this).each(function(){ this.checked = !this.checked; });
        }

        return this;
    };
})( jQuery );

または、プラグインを使用しない場合は、次のコードスニペットを使用できます。

// Check
$(':checkbox').prop('checked', true);

// Un-check
$(':checkbox').prop('checked', false);

// Toggle
$(':checkbox').prop('checked', function (i, value) {
    return !value;
});
302
cwharris

できるよ

$('.myCheckbox').attr('checked',true) //Standards compliant

または

$("form #mycheckbox").attr('checked', true)

起動したいチェックボックスのonclickイベントにカスタムコードがある場合は、代わりにこれを使用します。

$("#mycheckbox").click();

属性を完全に削除してチェックを外すことができます。

$('.myCheckbox').removeAttr('checked')

あなたはこのようなすべてのチェックボックスをチェックすることができます：

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});
139
Micah

新しいメソッドで$ .fnオブジェクトを拡張することもできます。

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

それからあなたはただすることができます：

$(":checkbox").check();
$(":checkbox").uncheck();

あるいは、それらの名前を使用する他のライブラリを使用する場合は、mycheck（）やmyuncheck（）のようにもっとユニークな名前を付けることができます。

75
livefree75
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

最後のものはチェックボックスのクリックイベントを発生させ、他は発生させません。

64
Chris Brandsma

チェックボックスをチェックするためにあなたは使うべきです

 $('.myCheckbox').attr('checked',true);

または

 $('.myCheckbox').attr('checked','checked');

チェックボックスをオフにするには、常にfalseに設定する必要があります。

 $('.myCheckbox').attr('checked',false);

もしあなたがそうするなら

  $('.myCheckbox').removeAttr('checked')

属性をまとめて削除するため、フォームをリセットすることはできません。

悪いデモjQuery 1.6 。これは壊れていると思います。 1.6のために私はそれについての新しいポストを作るつもりです。

新しいワーキングデモjQuery 1.5.2 はChromeで動作します。

両方のデモで使用

$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');
    }
});
62
mcgrailm

質問がであると仮定して...

チェックボックスセットBY VALUE？を確認するにはどうすればよいですか

一般的なチェックボックスセットでは、すべての入力タグが同じ名前属性valueによって異なるを持ちます。セットの各入力にIDはありません。

Xianの答えは、 より具体的なセレクター を使って、次のコード行を使って拡張できます。

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
44
Peter Krauss

解決策がありません。私はいつも使うよ：

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}
44
Overbeeke

与えられた部分文字列 "ckbItem"を含む値を持つ指定された属性を持つ要素を選択する：

$('input[name *= ckbItem]').prop('checked', true);

Name属性にckbItemを含むすべての要素を選択します。

44
Abou-Emish

jQuery 1.6 以上を使用してチェックボックスをチェックするには、次のようにします。

checkbox.prop('checked', true);

チェックを外すには、次のようにします。

checkbox.prop('checked', false);

これが、jQueryを使ってチェックボックスを切り替えるために使うものです。

checkbox.prop('checked', !checkbox.prop('checked'));

jQuery 1.5 またはそれ以下を使用している場合：

checkbox.attr('checked', true);

チェックを外すには、次のようにします。

checkbox.attr('checked', false);
40
Ramon de Jesus

これはjQueryなしでそれをする方法です

function addOrAttachListener(el, type, listener, useCapture) {
  if (el.addEventListener) {
    el.addEventListener(type, listener, useCapture);
  } else if (el.attachEvent) {
    el.attachEvent("on" + type, listener);
  }
};

addOrAttachListener(window, "load", function() {
  var cbElem = document.getElementById("cb");
  var rcbElem = document.getElementById("rcb");
  addOrAttachListener(cbElem, "click", function() {
    rcbElem.checked = cbElem.checked;
  }, false);
}, false);
<label>Click Me!
  <input id="cb" type="checkbox" />
</label>
<label>Reflection:
  <input id="rcb" type="checkbox" />
</label>

35
Aeoril

これを試して：

$('#checkboxid').get(0).checked = true;  //For checking

$('#checkboxid').get(0).checked = false; //For unchecking
30
prashanth

これは、チェックされたボタンとチェックされていないボタンのコードです。

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).attr('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).attr('checked', false); unset=1; }
        });
        set=unset;
    });
});

更新：これはattrを置き換える新しいJquery 1.6+ propメソッドを使った同じコードブロックです：

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).prop('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).prop('checked', false); unset=1; }
        });
        set=unset;
    });
});
28
starjahid

属性をチェックするためにjQueryでelementObjectを使用できます。

$(objectElement).attr('checked');

これをすべてのjQueryバージョンにエラーなく使用できます。

更新：Jquery 1.6以降にはattrを置き換える新しいpropメソッドがあります。例えば：

$(objectElement).prop('checked');
26
Prasanth P

PhoneGap を使用してアプリケーションを開発していて、すぐに表示したいボタンの値がある場合は、これを忘れないでください。

$('span.ui-[controlname]',$('[id]')).text("the value");

私はスパンなしで、インターフェースはあなたが何をしても更新しないことを発見しました。

25
Clement Ho

これは、複数のチェックボックスをチェックする方法のコードとデモです。

http://jsfiddle.net/tamilmani/z8TTt/

$("#check").on("click", function () {

    var chk = document.getElementById('check').checked;
    var arr = document.getElementsByTagName("input");

    if (chk) {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = true;
        }
    } else {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = false;
        }
    }
});
23
tamilmani

別の可能な解決策：

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }
20
Muhammad Aamir Ali

Internet Explorer 9 よりも前のInternet Explorerでのメモリリークに注意してください jQueryのドキュメントに記載されています

バージョン9より前のInternet Explorerでは、.prop（）を使用してDOM 要素プロパティを単純なプリミティブ値（数値、文字列、またはブール値）以外に設定すると、メモリリークが発生する可能性があります。 DOM要素がドキュメントから削除されるまでプロパティは削除されません（.removeProp（）を使用）。メモリリークのないDOMオブジェクトに安全に値を設定するには、.data（）を使用してください。

18
naor

JQuery 1.6以降の場合

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

JQuery 1.5.x以下の場合

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

チェックする、

$('.myCheckbox').removeAttr('checked');
18
logan

モバイルを使用していて、インターフェイスでチェックボックスを更新してチェックマークを外して表示する場合は、次のようにします。

$("#checkbox1").prop('checked', false).checkboxradio("refresh");
18
Matt Peacock

チェックしてチェックを外す

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
17
jj2422
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
16
mahmoh

@ livefree75が言ったように：

jQuery 1.5.x以下

新しいメソッドで$ .fnオブジェクトを拡張することもできます。

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

しかし、新しいバージョンのjQueryでは、次のようなものを使用する必要があります。

jQuery 1.6以降 

    (function($)  {
       $.fn.extend({
          check : function()  {
             return this.filter(":radio, :checkbox").prop("checked", true);
          },
          uncheck : function()  {
             return this.filter(":radio, :checkbox").prop("checked",false);
          }
       });
    }(jQuery));

それからあなたはただすることができます：

    $(":checkbox").check();
    $(":checkbox").uncheck();
16
Ardalan Shahgholi

これはおそらく最短かつ最も簡単な解決策です。

$(".myCheckBox")[0].checked = true;

または

$(".myCheckBox")[0].checked = false;

さらに短くなります。

$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;

これは a jsFiddle でもあります。

15
frieder

単純なJavaScriptは非常に単純で、オーバーヘッドがずっと少ないです。

var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{
    elements[i].checked = true;
}

例はこちら

14
Alex W

あなたがチェックボックスをチェックしたとき。

$('.className').attr('checked', 'checked')

それは十分ではないかもしれません。以下の関数も呼び出すべきです。

$('.className').prop('checked', 'true')

特にチェックボックスchecked属性を削除したとき。

13
Serhat Koroglu

私はそれを使用して動作させることができませんでした：

$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');

Trueとfalseの両方がチェックボックスをチェックします。私にとってうまくいったのは、

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking
13
fredcrs

これが完全な答えです jQueryを使う

私はそれをテストし、それは100％動作します：D

    // when the button (select_unit_button) is clicked it returns all the checed checkboxes values 
    $("#select_unit_button").on("click", function(e){

             var arr = [];

             $(':checkbox:checked').each(function(i){
                 arr[i] = $(this).val(); // u can get id or anything else
             });

              //console.log(arr); // u can test it using this in google chrome
    });
11
user1477929

ASP.NET MVC を使用する場合、多くのチェックボックスを生成し、後でJavaScriptを使用してすべて選択/選択解除を持つことができます。

_ html _ 

@foreach (var item in Model)
{
    @Html.CheckBox(string.Format("ProductId_{0}", @item.Id), @item.IsSelected)
}

JavaScript 

function SelectAll() {       
        $('input[id^="ProductId_"]').each(function () {          
            $(this).prop('checked', true);
        });
    }

    function UnselectAll() {
        $('input[id^="ProductId_"]').each(function () {
            $(this).prop('checked', false);
        });
    }
10
Academy of Programmer

JQueryでは、

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

または 

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

JavaScriptでは、

if (document.getElementById("checkboxID").checked){
    alert("Checked");
}
10
ijarlax

これは誰かに役立つかもしれません。

HTML5

 <input id="check_box" type="checkbox" onclick="handleOnClick()">

JavaScriptです。

  function handleOnClick(){

      if($("#check_box").prop('checked'))
      {        
          console.log("current state: checked");
      }
      else
      {         
          console.log("current state: unchecked");
      }    
 }
7
Sedrick

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

$('input[name="activity[task_state]"]').val("specify the value you want to check ")
5
anusha
$(".myCheckBox").prop("checked","checked");
4
mathew

if($('jquery_selector').is(":checked")){
  //somecode
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

4
David Arul

あなたがたまたまブートストラップを使っているなら（おそらく気付かないうちに）... 

$('#myCheckbox').bootstrapToggle('on')
$('#myCheckbox').bootstrapToggle('off')

http://www.bootstraptoggle.com/ /

3
Kenmeister

.prop('checked', true|false)を使用していて、 チェックボックス を変更していない場合は、このようにtrigger('click')を追加する必要があります。

//check
$('#checkboxF1').prop( "checked", true).trigger('click');


//un-Check
$('#checkboxF1').prop( "checked", true).trigger('click');
1
Alex Montoya

あなたはさまざまな方法でJSを使用してチェックボックスのチェック状態を確認することができます。あなたは以下を見ることができます。

  1. 最初の方法 - $('.myCheckbox').prop('checked', true);

  2. 2番目の方法 - $('.myCheckbox').attr('checked', true);

  3. 3番目の方法（チェックボックスがチェックされているかどうかのチェック条件用） - $('.myCheckbox').is(':checked')

1
Gaurang Sondagar

2019年1月に編集

.prop（propertyName） - 追加されたバージョン：1.6

p {margin: 20px 0 0;}
b {color: red;}
label {color: red;}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check here</label>
<p></p>
 
<script>
$( "input" ).change(function() {
  var $input = $( this );
  $( "p" ).html(
    "The .attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
    "The .prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
    "The .is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
}).change();
</script>
 
</body>
</html>

Angularフレームワークについて

例1

あなたの.htmlファイル内

<input type="checkbox" (change)="toggleEditable($event)">

あなたの.tsファイル内

toggleEditable(event) {
     if ( event.target.checked ) {
         this.contentEditable = true;
    }
}

例2

あなたの.htmlファイル内

<input type="checkbox" [(ngModel)]="isChecked" (change)="checkAction(isChecked ? 'Action1':'Action2')" />
0
Lyes CHIOUKH