javascript checkbox 取得 - jQueryでチェックボックスを "チェック"に設定していますか?





15 Answers

つかいます:

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

チェックボックスがオンになっているかどうかを確認したい場合は:

$('.myCheckbox').is(':checked');
複数 イベント 発火

私はjQueryを使ってcheckboxをチェックするために、このようなことをしたいと思いcheckbox

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

または

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

そんなことがあるの?




できるよ

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

または

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

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

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

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

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

すべてのチェックボックスを次のようにチェックすることができます:

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



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

最後のものはチェックボックスのクリックイベントを発生させ、他はチェックボックスのイベントを発生させません。 だからあなたが発射したいチェックボックスのonclickイベントにカスタムコードを持っている場合は、最後のものを使用してください。




その質問は次のように仮定します...

BY VALUEのチェックボックスをチェックするにはどうすればいいですか?

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

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

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



これは、指定された属性 "ckbItem"を含む値を持つ要素を選択します。

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

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




ここでは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>




ここではチェックされているボタンとチェックされていないボタンがあります:

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

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



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

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

私はスパンがなければ、あなたが何をしてもインターフェースは更新されないことが分かった。




もう一つの可能​​な解決法:

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



api.jquery.com/propれているように、 Internet Explorer 9より前のInternet Explorerのメモリリークに注意してください。

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




チェックしたりチェックを外したりするには

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



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



プレーンJavaScriptは非常にシンプルでオーバーヘッドはほとんどありません:

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

ここの例




私はそれを使用して働くことができませんでした:

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

trueとfalseの両方がチェックボックスをチェックします。 私のために働いたのは、

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



jQueryでは、

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

または

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

JavaScriptでは、

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



Related