javascript チェックされたら - jQueryでチェックボックスを "チェック"に設定していますか?





取得 複数 (25)


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

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

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

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

または

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

そんなことがあるの?




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



複数のチェックボックスをチェックする方法のコードとデモはここにあります...

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



jQuery 1.6以上でチェックボックスをチェックするには、次のようにします:

checkbox.prop('checked', true);

チェックを外すには:

checkbox.prop('checked', false);

ここではjQueryを使ってチェックボックスを切り替えるのに使いたいものがあります:

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

1.5以下のjQueryを使用している場合:

checkbox.attr('checked', true);

チェックを外すには:

checkbox.attr('checked', false);



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

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

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

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



できるよ

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

または

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

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

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

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

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

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

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



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




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



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



$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});



jQueryでは、

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

または

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

JavaScriptでは、

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



属性をチェックするためにelementObjectをjQueryと共に使用することができます:

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

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

更新:Jquery 1.6+には、attrに代わる新しいpropメソッドがあります。

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



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

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




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

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



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

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

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




これは、クロスプラットフォーム標準であるため、jQueryでチェックボックスをチェックしたりチェックを外したりする正しい方法です。フォームの再配布可能です。

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

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

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

問題 (jQuery 1.6):

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

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

Fiddle

ソリューション:

DOMエレメントでJavaScriptの「checked」プロパティを使用することで、 DOMを操作して、必要な処理を行う代わりに、問題を直接解決できます。

Fiddle

このプラグインは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;
});



あなたのようなチェックボックスをオンにしたとき。

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

それでは不十分かもしれません。 また、以下の関数を呼び出す必要があります。

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

特に、チェックボックスのチェックされた属性を削除したとき。




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

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



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

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

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




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

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




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のリリースノート.prop() 属性対属性セクションにあります。 ドキュメンテーション

jQueryのすべてのバージョン

1つの要素で作業している場合は、常にHTMLInputElement.checkedプロパティを変更できます。

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

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




私は解決策が不足しています。 私はいつも使っています:

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



つかいます:

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

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

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



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

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

または

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

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

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

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

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

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

悪いデモjQuery 1.6 。 私はこれが壊れていると思う。 1.6については、私はそれについて新しい投稿をします。

NEW WORKING DEMO jQuery 1.5.2はChromeで動作します。

どちらのデモでも使用できます

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



jQueryの:hiddenセレクタに対して要素をテストする場合、子要素が表示されているにもかかわらず、絶対配置された要素が非表示として認識されることが考えられます

jQueryのドキュメントを詳しく見ていくと、関連する情報が得られます。

要素はいくつかの理由で隠されていると考えることができます:[...]幅と高さは明示的に0に設定されています。[...]

これは実際に要素のボックスモデルと計算されたスタイルに関しては意味があります。 幅と高さが明示的に0に設定されていなくても、 暗黙的に設定されることがあります。

次の例を見てください:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false
.foo {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ff0000;
}

.bar {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0000ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="bar"></div>
</div>

JQUERY 3.xの更新:

jQuery 3では、記述された動作が変わります! 幅や高さがゼロのレイアウトボックスを含むレイアウトボックスがあれば、要素は可視と見なされます。

JSFiddle with jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

同じJSにこの出力があります:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false




javascript jquery checkbox selected checked