web-dev-qa-db-ja.com

クリックjqueryで「チェック済み」属性を追加

クリック時のチェックボックスに「checked」属性を追加する方法を見つけようとしました。これを行う理由は、チェックボックスをオフにした場合です。ローカルストレージにそれをhtmlとして保存して、ページが更新されるときにチェックボックスがオンになっていることに気付くことができます。今のところ、それをオフにすると親はフェードしますが、保存してリロードするとフェードのままになりますが、チェックボックスはオフになります。

$（this）.attr（ 'checked'）;を試しました。しかし、それはチェックを追加したくないようです。

編集：コメントを読んだ後、私は明確ではなかったようです。デフォルトの入力タグは次のとおりです。

<input type="checkbox" class="done">

チェックボックスをクリックすると、そのチェックボックスの最後に「checked」が追加されます。例：

<input type="checkbox" class="done" checked>

これを行うには、htmlをローカルストレージに保存するとき、ロードするときにチェックボックスをオンにしてレンダリングする必要があります。

$(".done").live("click", function(){
if($(this).parent().find('.editor').is(':visible') ) {
var editvar = $(this).parent().find('input[name="tester"]').val();
$(this).parent().find('.editor').fadeOut('slow');
$(this).parent().find('.content').text(editvar);
$(this).parent().find('.content').fadeIn('slow');
}
if ($(this).is(':checked')) {
$(this).parent().fadeTo('slow', 0.5);
$(this).attr('checked'); //This line
}else{

$(this).parent().fadeTo('slow', 1);
$(this).removeAttr('checked');
}
});
javascriptjqueryhtml5local-storage
23
MoDFoX

これは、属性の使用が実際に適切なまれな機会の1つであるようです。 jQueryのattr()メソッドは、ほとんどの場合（これを含む）、属性ではなくプロパティを実際に設定し、その名前の選択がやや愚かに見えるため、役に立ちません。 [更新：jQuery 1.6.1以降、 状況はわずかに変更されました ]

IEにはDOM setAttributeメソッドにいくつかの問題がありますが、この場合は問題ありません。

this.setAttribute("checked", "checked");

IEでは、これにより、常に実際にチェックボックスがチェックされます。他のブラウザでは、ユーザーがチェックボックスをすでにオンまたはオフにしている場合、属性を設定しても効果はありません。したがって、チェックボックスがチェックされ、checked属性を持つことを保証する場合は、checkedプロパティも設定する必要があります。

this.setAttribute("checked", "checked");
this.checked = true;

チェックボックスをオフにして属性を削除するには、次の手順を実行します。

this.setAttribute("checked", ""); // For IE
this.removeAttribute("checked"); // For other browsers
this.checked = false;
26
Tim Down

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

ちょうどattr( 'checked' )は$（this）のチェックされた属性の値を返します。設定するには、2番目の引数が必要です。に基づく <input type="checkbox" checked="checked" />

編集：

コメントに基づいて、より適切な操作は次のとおりです。

$( this ).attr( 'checked', true )

そして、より適切で効率的なストレートjavascriptメソッド：

this.checked = true;

ありがとう@ Andy E そのため。

32
hookedonwinter

.attr()が機能しない場合（特に連続してチェックボックスをオンまたはオフにする場合）、.prop()の代わりに.attr()を使用します。

8
charliepark

このコードを使用

var sid = $(this);
sid.attr('checked','checked');
1
user1948368