設定＆＃8220;チェック済み＆＃8221; jQueryのチェックボックスの場合
https://stackoverflow.com/questions/426258
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
jQuery を使用して checkbox にチェックマークを付けるには、次のようにします：
$(".myCheckBox").checked(true);
または
$(".myCheckBox").selected(true);
そのようなものは存在しますか？
解決
jQuery 1.6 +
新しい .prop（） メソッドを使用します。
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
jQuery 1.5.x以前
.prop（）メソッドは使用できないため、
$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);
これはによって使用されるアプローチであることに注意してくださいjQueryのバージョン1.6より前のユニットテスト。使用するよりも望ましい
$('.myCheckbox').removeAttr('checked');
ボックスが最初にチェックされた場合、後者は .reset（） を含むフォームで-微妙ではあるがおそらく好ましくない動作の変更。
詳細については、1.5.xから1.6への移行における checked 属性/プロパティの処理の変更に関する不完全な説明がバージョン1.6リリースノートおよび Attributes vs.Properties セクション .prop（）ドキュメント。
jQueryの任意のバージョン
1つの要素のみを使用している場合、をいつでも変更できます。 HTMLInputElement の .checked プロパティ：
$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;
これの代わりに .prop（）および .attr（）メソッドを使用する利点は、一致したすべての要素で動作することです。
他のヒント
使用：
$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);
そしてチェックボックスがチェックされているかどうかを確認したい場合：
$('.myCheckbox').is(':checked');
これはクロスプラットフォーム標準であるため、jQueryでチェックボックスをチェックおよびチェック解除する正しい方法であり、フォームの再投稿を許可します。
$('.myCheckBox').each(function(){ this.checked = true; });
$('.myCheckBox').each(function(){ this.checked = false; });
これにより、チェックボックスのチェックとチェック解除にJavaScript標準を使用しているため、「チェック済み」を適切に実装するブラウザはチェックボックス要素のプロパティは、このコードを問題なく実行します。これはすべて主要なブラウザであるはずです が、Internet＆nbsp; Explorer＆nbsp; 9より前のバージョンではテストできません。
問題（jQuery 1.6）：
ユーザーがチェックボックスをクリックすると、そのチェックボックスは「チェック済み」への応答を停止します。属性の変更。
チェックボックスを誰かがクリックした後にジョブを実行できない場合のチェックボックス属性の例です（Chromeで発生します）。
解決策：
JavaScriptの「チェック済み」を使用して、 DOM 要素のプロパティを使用すると、DOMを操作して何をするかを試みる代わりに、問題を直接解決できます。 やりたい。
このプラグインは、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;
});
できること
$('.myCheckbox').attr('checked',true) //Standards compliant
または
$("form #mycheckbox").attr('checked', true)
起動するチェックボックスのonclickイベントにカスタムコードがある場合は、代わりに次のコードを使用します。
$("#mycheckbox").click();
属性を完全に削除することでチェックを外すことができます：
$('.myCheckbox').removeAttr('checked')
次のようにすべてのチェックボックスをチェックできます：
$(".myCheckbox").each(function(){
$("#mycheckbox").click()
});
新しいメソッドで$ .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（）などの固有の名前を付けたい場合があります。
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();
最後のイベントはチェックボックスのクリックイベントを発生させ、他のイベントは発生させません。 そのため、起動するチェックボックスのonclickイベントにカスタムコードがある場合は、最後のコードを使用します。
使用する必要があるチェックボックスをチェックするには
$('.myCheckbox').attr('checked',true);
または
$('.myCheckbox').attr('checked','checked');
チェックボックスをオフにするには、常にfalseに設定する必要があります：
$('.myCheckbox').attr('checked',false);
行う場合
$('.myCheckbox').removeAttr('checked')
属性をすべて一緒に削除するため、フォームをリセットできません。
BAD DEMO 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');
}
});
これは、指定されたサブストリング＆quot; ckbItem＆quot;を含む値を持つ指定された属性を持つ要素を選択します：
$('input[name *= ckbItem]').prop('checked', true);
name属性にckbItemを含むすべての要素を選択します。
質問は...と仮定します...
チェックボックスセット BY VALUEをチェックするにはどうすればよいですか
通常のチェックボックスセットでは、すべての入力タグが同じ名前を持ち、属性 value によって異なることに注意してください。セットの各入力にはIDがありません。
Xianの答えは、次のコード行を使用して、より具体的なセレクタで拡張できます。
$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
解決策がありません。常に使用します：
if ($('#myCheckBox:checked').val() !== undefined)
{
//Checked
}
else
{
//Not checked
}
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);
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>
これを試してください：
$('#checkboxid').get(0).checked = true; //For checking
$('#checkboxid').get(0).checked = false; //For unchecking
ボタンを使用してオン/オフを切り替えるコードは次のとおりです。
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;
});
});
属性を確認するには、jQueryで elementObject を使用できます：
$(objectElement).attr('checked');
これをすべてのjQueryバージョンにエラーなしで使用できます。
更新：Jquery 1.6+には、attrに代わる新しいpropメソッドがあります。例：
$(objectElement).prop('checked');
アプリケーション開発を行う PhoneGap を使用していて、すぐに表示したいボタンの値がある場合、これを忘れないでください
$('span.ui-[controlname]',$('[id]')).text("the value");
スパンがないと、インターフェイスは何をしても更新されません。
複数のチェックボックスをオンにする方法のコードとデモを次に示します...
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;
}
}
});
別の可能な解決策：
var c = $("#checkboxid");
if (c.is(":checked")) {
$('#checkboxid').prop('checked', false);
} else {
$('#checkboxid').prop('checked', true);
}
モバイルを使用していて、インターフェースを更新してチェックボックスをオフにしたい場合は、次を使用します：
$("#checkbox1").prop('checked', false).checkboxradio("refresh");
Internet＆nbsp; Explorer＆nbsp; 9 の前に、Internet＆nbsp; Explorerのメモリリークに注意してください。 jQueryドキュメントの状態：
バージョン9より前のInternet Explorerでは、.prop（）を使用してDOMを設定します 単純なプリミティブ値以外の要素プロパティ （数値、文字列、またはブール値）は、プロパティが DOM要素が削除される前に削除されない（.removeProp（）を使用） ドキュメントから。メモリなしでDOMオブジェクトに安全に値を設定するには リーク、.data（）を使用します。
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');
チェックおよびチェック解除するには
$('.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();
$('controlCheckBox').click(function(){
var temp = $(this).prop('checked');
$('controlledCheckBoxes').prop('checked', temp);
});
これはおそらく最短かつ最も簡単なソリューションです：
$(".myCheckBox")[0].checked = true;
または
$(".myCheckBox")[0].checked = false;
さらに短くなります：
$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;
jsFiddle も同様です。
プレーンな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
次のようなチェックボックスをオンにしたとき
$('.className').attr('checked', 'checked')
それでは十分ではないかもしれません。以下の関数も呼び出す必要があります。
$('.className').prop('checked', '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
});
jQueryで、
if($("#checkboxId").is(':checked')){
alert("Checked");
}
または
if($("#checkboxId").attr('checked')==true){
alert("Checked");
}
JavaScriptで、
if (document.getElementById("checkboxID").checked){
alert("Checked");
}
