jQueryのチェック/チェック解除ラジオボタンonclick
Onclickラジオボタンをオン/オフするこのコードがあります。
UIに適していないことはわかっていますが、これが必要です。
$('#radioinstant').click(function() {
var checked = $(this).attr('checked', true);
if(checked){
$(this).attr('checked', false);
}
else{
$(this).attr('checked', true);
}
});
上記の機能は動作していません。
ボタンをクリックしても何も変わりません。チェックされたままです。どうして？エラーはどこにありますか？私はjQueryの専門家ではありません。 jQuery 1.3.2を使用しています
明確にするために、#radioinstantはラジオボタンのIDです。
チェックするチェックボックスだけが必要な場合は、JQueryで実行することについて心配しないでください。これは、クリック時のチェックボックスのデフォルト機能です。ただし、追加の操作を行う場合は、JQueryを使用して追加できます。 jQuery 1.9より前では、$(this).attr('checked');の代わりに$(this).attr('checked', true);を使用して値を取得できます。2番目は値を設定するためです。
Here は、デフォルトのチェックボックス機能とJQueryで実行していることを示すフィドルデモです。
注：JQuery 1.6の後、3つの場所すべてで$(this).prop;の代わりに$(this).attrを使用する必要があります（これを指定してくれた@Whatevoに感謝します） outおよび 詳細はこちらを参照 ）。
UPDATE：
申し訳ありませんが、ラジオボタンにする必要があるという要件を満たしていませんでした。引き続きチェックボックスを検討することもできますが、 here はラジオ入力バージョンの更新されたコードです。 1.3.2ではpreviousValueがサポートされているとは思わないので、propをチェックボックスの属性として設定することで機能します。一部の人々はフィールドにランダムな属性を設定することを好まないため、スコープ変数でこれを行うこともできます。 ここ は新しい例です。
更新2：
Joshが指摘したように、以前のソリューションは1つのラジオボタンのみで機能しました。以下は、ラジオのグループを名前と fiddle で選択解除できるようにする関数です。
var makeRadiosDeselectableByName = function(name){
$('input[name=' + name + ']').click(function() {
if($(this).attr('previousValue') == 'true'){
$(this).attr('checked', false)
} else {
$('input[name=' + name + ']').attr('previousValue', false);
}
$(this).attr('previousValue', $(this).attr('checked'));
});
};
以前の提案を拡張しました。これは、同じ名前で複数の無線が結合されている場合に有効です。
$("input[type='radio']").click(function()
{
var previousValue = $(this).attr('previousValue');
var name = $(this).attr('name');
if (previousValue == 'checked')
{
$(this).removeAttr('checked');
$(this).attr('previousValue', false);
}
else
{
$("input[name="+name+"]:radio").attr('previousValue', false);
$(this).attr('previousValue', 'checked');
}
});
チェックされた値を取得する代わりに、次のように設定しています：
var checked = $(this).attr('checked', true);
適切に取得するには：
var checked = $(this).attr('checked');
有効なソリューション（異なる値を持つ複数のラジオボタンを使用）：
// select radio buttons group (same name)
var radioButtons = $("input[type='radio'][name='rr']");
// save initial ckecked states
var radioStates = {};
$.each(radioButtons, function(index, rd) {
radioStates[rd.value] = $(rd).is(':checked');
});
// handle click event
radioButtons.click(function() {
// check/unchek radio button
var val = $(this).val();
$(this).prop('checked', (radioStates[val] = !radioStates[val]));
// update other buttons checked state
$.each(radioButtons, function(index, rd) {
if(rd.value !== val) {
radioStates[rd.value] = false;
}
});
});
P.S.:jquery <1.6の場合、$().attrの代わりに$().propを使用する必要があります
デモ： jsFiddle
最良かつ最短のソリューション。 （同じ名前の）ラジオの任意のグループで機能します。
$(document).ready(function(){
$("input:radio:checked").data("chk",true);
$("input:radio").click(function(){
$("input[name='"+$(this).attr("name")+"']:radio").not(this).removeData("chk");
$(this).data("chk",!$(this).data("chk"));
$(this).prop("checked",$(this).data("chk"));
$(this).button('refresh'); // in case you change the radio elements dynamically
});
});
詳細については、 こちら 。
楽しい。
これが問題だと思います。複数のラジオボタンがあり、そのうちの1つがクリックされた場合、すべてを選択解除する方法はありません。必要なのは「なしまたは1つだけ」のセレクターなので、チェックボックスは適切ではありません。 「クリア」ボタンなどを使用してすべての選択を解除できますが、選択したラジオボタンをクリックして選択を解除し、「なし」状態に戻ると、UIが乱雑になりません追加のコントロール。
クリックハンドラーの使用に関する問題は、呼び出されるまでにラジオボタンが既にチェックされていることです。これが最初のクリックか、すでにチェックされているラジオボタンの2回目のクリックかはわかりません。そこで、2つのイベントハンドラーmousedownを使用して前の状態を設定し、次にクリックハンドラーを上記のように使用しています。
$("input[name=myRadioGroup]").mousedown(function ()
{
$(this).attr('previous-value', $(this).prop('checked'));
});
$("input[name=myRadioGroup]").click(function ()
{
var previousValue = $(this).attr('previous-value');
if (previousValue == 'true')
$(this).prop('checked', false);
});
toggleAttr()は、 このとても素敵で小さなプラグイン によって提供されます。
サンプルコード
$('#my_radio').click(function() {
$(this).toggleAttr('checked');
});
/**
* toggleAttr Plugin
*/
jQuery.fn.toggleAttr = function(attr) {
return this.each(function() {
var $this = $(this);
$this.attr(attr) ? $this.removeAttr(attr) : $this.attr(attr, attr);
});
};
さらに楽しい、 デモ
ラベルまたはボタンタグ内にラジオボタンを配置して、いくつかの素敵なことを行うことができます。
私にとってはうまくいかない上記のソリューションのいくつかをテストしたので、私は自分で作成することにしました。ラジオボタンがクリックされた後、新しいクリックリスナーを作成します。
/**
* Radio select toggler
* enables radio buttons to be toggled when clicked
* Created by Michal on 09/05/2016.
*/
var radios = $('input[type=radio]');
/**
* Adds click listeners to all checkboxes to unselect checkbox if it was checked already
*/
function updateCheckboxes() {
radios.unbind('click');
radios.filter(':checked').click(function () {
$(this).prop('checked', false);
});
radios.click(function () {
updateCheckboxes();
});
}
updateCheckboxes();
Jurrieからの回答の改善されたバージョン
$('#myRadio').off('click').on('click', function() {
if ($(this).data('checked')) {
$(this).removeAttr('checked');
$(this).data('checked', false);
} else {
$(this).data('checked', true);
}
});
$（document）.ready（function（）{$（ "input：radio：checked"）。data（ "chk"、true）;
$("input:radio").click(function(){
$("input[name='"+$(this).attr("name")+"']:radio").not(this).removeData("chk");
$(this).data("chk",!$(this).data("chk"));
$(this).prop("checked",$(this).data("chk"));
});
}）;
関連するが、異なるシナリオがあります。以下は私がやっていることです：
注：メインラジオボタンが選択されている場合、クラス「containerRadio」のすべてのラジオボタンを選択/選択解除するコード。
CODE
$('#selectAllWorkLot').click (function ()
{
var previousValue = $(this).attr('previousValue');
if (previousValue == 'checked')
{
resetRadioButtonForSelectAll();
//Unselect All
unSelectAllContainerRadioButtons();
}
else
{
$(this).attr('previousValue', 'checked');
//Select All
selectAllContainerRadioButtons();
}
});
function resetRadioButtonForSelectAll()
{
$('#selectAllWorkLot').removeAttr('checked');
$('#selectAllWorkLot').attr('previousValue', false);
//$('#selectAllWorkLot').prop('checked', false);
}
function selectAllContainerRadioButtons()
{
$('.containerRadio').prop('checked', true);
}
function unSelectAllContainerRadioButtons()
{
$('.containerRadio').prop('checked', false);
}
DiegoP、
属性が削除されるまでボックスのチェックがオフにならないことに気付くまで、私は同じ問題を抱えていました。つまり、チェックされた値がfalseになっても、そこに残ります。
したがって、removeAttr（）関数を使用して、チェックされたattribを削除すると、確実に機能します。
最も簡単なソリューション。ラジオとチェックボックスの両方。
$('body').on('click', 'input[type="checkbox"]', function(){
if ($(this).attr('checked')){
$( this ).attr( 'checked', false);
} else {
$( this ).attr( 'checked', true);
}
});
$('body').on('click', 'input[type="radio"]', function(){
var name = $(this).attr('name');
$("input[name="+name+"]:radio").attr('checked', false);
$( this ).attr( 'checked', true);
});
-編集-
コードがラジオ入力をチェックボックス入力のように動作させているように見えます。 jQueryを使用せずに、チェックボックス入力のみを使用することを考えるかもしれません。ただし、@ manjiが言ったように、強制する場合は、クリックハンドラーの外部に値を保存し、各クリックで値をその時点の値と反対に設定する必要があります。 @manjiの答えは正しいです、DOMを再クエリするのではなくjQueryオブジェクトをキャッシュする必要があることを追加します：
var $radio = $("#radioinstant"),
isChecked = $radio.attr("checked");
$radio.click(function() {
isChecked = !isChecked;
$(this).attr("checked", isChecked);
});
ここに簡単な解決策があります。答えを改善するための簡単な例を示します。
$('[type="radio"]').click(function () {
if ($(this).attr('checked')) {
$(this).removeAttr('checked');
$(this).prop('checked',false);
} else {
$(this).attr('checked', 'checked');
}
});
デモ 遅すぎてごめんなさい.. :)
この質問から私が試みた解決策は、私にとってはうまくいきませんでした。部分的に機能した回答のうち、まだチェックされていないラジオボタンをもう一度チェックするために、以前チェックされていなかったラジオボタンを2回クリックする必要があることがわかりました。現在、jQuery 3+を使用しています。
データ属性またはその他の属性を使用してこれを機能させようと試みた後、最終的にクラスを使用して解決策を見つけました。
チェック済みの無線入力については、クラスcheckedを指定します。例：
<input type="radio" name="likes_cats" value="Meow" class="checked" checked>
JQueryは次のとおりです。
$('input[type="radio"]').click(function() {
var name = $(this).attr('name');
if ($(this).hasClass('checked')) {
$(this).prop('checked', false);
$(this).removeClass('checked');
}
else {
$('input[name="'+name+'"]').removeClass('checked');
$(this).addClass('checked');
}
});
https://stackoverflow.com/a/13575528/8035 を取り、このように適合させました
$(document).ready(function() {
$('body').on('click', 'input[type="radio"]', function() {
changeCheckedAttributes($(this));
});
function changeCheckedAttributes(elt) {
$("input[name='"+$(elt).attr("name")+"']:radio").not($(elt)).removeData("chk");
$("input[name='"+$(elt).attr("name")+"']:radio").not($(elt)).removeAttr("checked");
$("input[name='"+$(elt).attr("name")+"']:radio").not($(elt)).prop("checked", false);
$(elt).data("chk",!$(elt).data("chk"));
$(elt).prop("checked", true);
$(elt).attr("checked", $(elt).data("chk"));
}
});
この関数は、すべてのラジオボタンにチェック/チェックなしを追加します
jQuery(document).ready(function(){
jQuery(':radio').click(function()
{
if ((jQuery(this).attr('checked') == 'checked') && (jQuery(this).attr('class') == 'checked'))
{
jQuery(this).attr('class','unchecked');
jQuery(this).removeAttr('checked');
} else {
jQuery(this).attr('class','checked');
}//or any element you want
});
});
この最後の解決策は、私のために働いたものです。未定義とオブジェクトオブジェクトに問題があったり、常にfalseを返し、その後常にtrueを返していましたが、このソリューションはチェックおよびチェック解除時に機能します。
このコードは、クリックするとフィールドを表示し、チェックを外すとフィールドを非表示にします。
$("#new_blah").click(function(){
if ($(this).attr('checked')) {
$(this).removeAttr('checked');
var radioValue = $(this).prop('checked',false);
// alert("Your are a rb inside 1- " + radioValue);
// hide the fields is the radio button is no
$("#new_blah1").closest("tr").hide();
$("#new_blah2").closest("tr").hide();
}
else {
var radioValue = $(this).attr('checked', 'checked');
// alert("Your are a rb inside 2 - " + radioValue);
// show the fields when radio button is set to yes
$("#new_blah1").closest("tr").show();
$("#new_blah2").closest("tr").show();
}
私はこれをお勧めします：
$('input[type="radio"].toggle').click(function () {
var $rb = $(this);
if ($rb.val() === 'on') {
$rb.val('off');
this.checked = false;
}
else {
$rb.val('on');
this.checked = true;
}
});
HTMLは次のようになります。
<input type="radio" class="toggle" value="off" />
関連する問題が発生していました-ドロップダウンからの選択に基づいてドロップダウンからダイアログボックスを開く必要がありました。1つまたは2つのラジオボタンを表示します。一度にアクティブにできるラジオボタンは1つだけです。
- オプション1には、1番目のラジオが選択された2つのラジオボタンが表示されます
- オプション2は2番目のラジオボタンを表示し、選択されます。
このスクリプトはいつかは動作しますが、チェックされたチェックボックスを挿入しますが、チェックボックスはまだチェックされていません
JQueryに行った .prop() 、jquery .prop() .attr()がattrまたはpropを使用しているときにラジオボタンに何らかの問題を抱えているようです。だから私が代わりにしたことは、選択値に基づいてラジオボタンをクリックすることです。
これにより、attrまたはpropを使用するか、長いコードをオフで使用する必要がなくなります。
myForm = $("#myForm");
if (argument === 'multiple') {
myForm.find('#radio1').parent('li').hide();
myForm.find('#radio2').trigger('click');
}
else{
myForm.find('#radio1').trigger('click');
myForm.find('#radio1').parent('li').show();
}
これがベストプラクティスであるかどうかはわかりませんが、それは魅力的です
まだ答えがある場合は、これがすべてのラジオボタンで機能することがわかりました。
<script type="text/javascript">
jQuery(document).ready(function ($){
var allRadios = $('input[type=radio]')
var radioChecked;
var setCurrent =
function(e) {
var obj = e.target;
radioChecked = $(obj).attr('checked');
}
var setCheck =
function(e) {
if (e.type == 'keypress' && e.charCode != 32) {
return false;
}
var obj = e.target;
if (radioChecked) {
$(obj).attr('checked', false);
} else {
$(obj).attr('checked', true);
}
}
$.each(allRadios, function(i, val){
var label = $('label[for=' + $(this).attr("id") + ']');
$(this).bind('mousedown keydown', function(e){
setCurrent(e);
});
label.bind('mousedown keydown', function(e){
e.target = $('#' + $(this).attr("for"));
setCurrent(e);
});
$(this).bind('click', function(e){
setCheck(e);
});
});
});
</script>
クリック時に使用し、ラジオがチェックされている場合のみチェックしてから選択を解除すると、ラジオはチェックされません。したがって、おそらく最も簡単なのは、次のようなクラス名を使用することです。
if($(this).hasClass('alreadyChecked')) {//it is already checked
$('.myRadios').removeClass('alreadyChecked');//remove from all radios
$(this).prop('checked', false);//deselect this
}
else {
$('.myRadios').removeClass('alreadyChecked');//remove from all
$(this).addClass('alreadyChecked');//add to only this
}