4427

checkboxusing jQueryをチェックするには、次のようなことをしたいと思います。

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

また

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

そのようなものは存在しますか？

4

43 に答える 43

6288

最新の jQuery

使用.prop():

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

ドム API

1 つの要素だけを操作している場合は、いつでも基になる要素にアクセスしてそのプロパティHTMLInputElementを変更できます。.checked

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

.prop()これの代わりにandメソッドを使用する利点.attr()は、一致したすべての要素に対して動作することです。

jQuery 1.5.x 以下

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

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

これは、バージョン 1.6 より前の jQuery の単体テストで使用されたアプローチであり、後者を使用するよりも望ましいことに注意してください$('.myCheckbox').removeAttr('checked');。ボックスが最初にチェックさ.reset()れていた場合、それを含む任意のフォームでの呼び出しの動作が変更されるためです。微妙ですが、おそらく望ましくない行動の変化。

詳細なコンテキストについては、checked1.5.x から 1.6 への移行における属性/プロパティの処理の変更に関する不完全な説明が、バージョン 1.6 のリリース ノートおよびドキュメントの属性とプロパティのセクションに記載されています。.prop()

于 2009-01-08T22:25:08.447 に答える
758

使用する：

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

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

$('.myCheckbox').is(':checked');
于 2009-01-08T22:25:25.183 に答える
337

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

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

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

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

問題(jQuery 1.6):

ユーザーがチェックボックスをクリックすると、そのチェックボックスは「checked」属性の変更に応答しなくなります。

誰かがチェックボックスをクリックした後、チェックボックス属性が失敗する例を次に示します (これは Chrome で発生します)。

フィドル

ソリューション：

DOM要素でJavaScript の「checked」プロパティを使用することにより、DOM を操作して目的の処理を行わせる代わりに、問題を直接解決できます。

フィドル

このプラグインは、jQuery によって選択された要素の checked プロパティを変更し、すべての状況でチェックボックスを正常にチェックおよびチェック解除します。したがって、これは強引な解決策のように思えるかもしれませんが、サイトのユーザー エクスペリエンスを向上させ、ユーザーの不満を防ぐのに役立ちます。

(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;
});
于 2011-05-06T19:31:21.063 に答える
159

できるよ

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

また

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

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

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

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

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

次のようにすべてのチェックボックスをオンにできます。

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});
于 2009-01-08T22:24:24.483 に答える
84

$.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() などのより一意の名前を付けたい場合があります。

于 2010-08-20T18:19:03.963 に答える
68 
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

最後のものはチェックボックスのクリックイベントを発生させますが、他のものは発生させません。そのため、発生させたいチェックボックスの onclick イベントにカスタム コードがある場合は、最後のコードを使用します。

于 2009-01-08T22:36:14.897 に答える
64

チェックボックスをオンにするには、次を使用する必要があります

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

また

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

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

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

もし、するなら

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

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

悪いデモjQuery1.6。これは壊れていると思います。1.6の場合、私はそれについて新しい投稿をするつもりです。

新しい動作デモjQuery1.5.2はChromeで動作します。

両方のデモで使用

$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');
    }
});
于 2011-03-23T15:22:24.483 に答える
54

これは、指定された部分文字列「ckbItem」を含む値を持つ指定された属性を持つ要素を選択します。

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

name 属性に ckbItem を含むすべての要素が選択されます。

于 2010-09-20T11:43:08.620 に答える
49

質問が...

チェックボックスをオンにするにはどうすればよいですか-値で設定しますか？

通常のチェックボックスセットでは、すべての入力タグが同じ名前であり、属性によって異なることに注意してvalueください。セットの各入力にIDはありません。

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

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
于 2012-03-09T12:28:49.063 に答える
47

解決策がありません。私はいつも使用します：

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}
于 2012-06-24T11:33:42.010 に答える
38

これが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>

于 2012-10-23T00:41:23.697 に答える
32

ボタンでチェックとチェックを外すためのコードは次のとおりです。

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;
    });
});
于 2011-10-25T08:51:47.433 に答える
31

これを試して：

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

$('#checkboxid').get(0).checked = false; //For unchecking
于 2012-09-10T10:26:10.500 に答える
30

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

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

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

更新: Jquery 1.6+ には、attr を置き換える新しい prop メソッドがあります。

$(objectElement).prop('checked');
于 2011-06-24T08:27:21.133 に答える
26

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

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

スパンがないと、何をしてもインターフェイスが更新されないことがわかりました。

于 2012-04-17T06:34:33.313 に答える
26

複数のチェックボックスをチェックする方法のコードとデモは次のとおりです...

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;
        }
    }
});
于 2013-08-16T06:17:37.977 に答える
22

@ 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();
于 2016-09-23T18:43:14.200 に答える
22

別の可能な解決策：

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }
于 2013-10-12T08:23:42.580 に答える
19

モバイルを使用していて、インターフェースを更新してチェックボックスをオフとして表示する場合は、次を使用します。

$("#checkbox1").prop('checked', false).checkboxradio("refresh");
于 2013-01-11T13:05:35.360 に答える
19

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');
于 2015-04-21T10:29:07.817 に答える
18

チェックを入れる・外すには

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
于 2013-11-14T06:34:53.620 に答える
18

jQuery のドキュメントに次のように記載されているように、Internet Explorer 9より前の Internet Explorer でのメモリ リークに注意してください。

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

于 2013-05-22T07:25:31.423 に答える
15

プレーンな JavaScript は非常に単純で、オーバーヘッドがはるかに少なくなります。

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

例はこちら

于 2013-09-18T01:14:15.430 に答える
14

次を使用して動作させることができませんでした：

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

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

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking
于 2012-01-05T13:26:52.107 に答える
12

これが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
    });
于 2013-02-27T15:49:10.110 に答える
11

これは誰かを助けるかもしれません。

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");
      }    
 }
于 2016-09-29T13:55:54.237 に答える
11

jQueryでは、

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

また

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

JavaScript では、

if (document.getElementById("checkboxID").checked){
    alert("Checked");
}
于 2013-06-10T13:17:51.853 に答える
8 
$(".myCheckBox").prop("checked","checked");
于 2013-05-13T09:50:11.360 に答える
6

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

$('input[name="activity[task_state]"]').val("specify the value you want to check ")
于 2014-04-23T06:34:58.567 に答える
-6

全体的に:

$("#checkAll").click(function(){
    $(".somecheckBoxes").prop('checked',$(this).prop('checked')?true:false);
});
于 2013-09-13T06:37:02.743 に答える