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




jquery チェックボックス 行 取得 (20)

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

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

または

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

そんなことがあるの?


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()は、一致するすべての要素に対して動作することです。


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

jQueryでは、

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

または

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

JavaScriptでは、

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

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

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

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

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

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

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

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


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

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

これは、クロスプラットフォーム標準であるため、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;
});

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

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

または

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

さらに短くなる:

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

ここにjsFiddleもあります。


これを試して:

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

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

つかいます:

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

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

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

できるよ

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

または

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

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

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

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

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

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

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

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

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

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


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

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

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

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

ここの例


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

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

新しいメソッドで$ .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()などの固有の名前を付けたい場合があります。


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

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

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

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

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

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

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

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





checked