2011-07-18 8 views
1

私はたくさんの方法を見てきました。そして私はクロスブラウザーにしてjQueryでチェックボックスの状態を取得するいくつかの問題を抱えていたことを覚えています。チェックボックスを適切にフォーマットする方法。 (jqueryとcrossbrowserに最適)

checked="true"checked="1"へのHTML checkedから

checked=checkedまたはchecked="yes"

今...一度は常にため。どのようなcrossbrのための最良の方法です。チェック/チェックを外して最終的にjqueryを作ってください 状態を取得/変更していますか?

+0

jquery – Ginnani

+0

でチェックボックスを書いて状態を取得/変更するには、いくつかの例を投稿しました。 –

答えて

2

これは実際には非常に簡単で、jQueryは誰もを混乱させました。

  • HTMLでは、checkedまたはchecked="checked"のいずれかを使用します。
  • XHTML(実際に使用してはいけませんが)では、checked="checked"を使用してください。

JavaScriptでは、チェックボックスのチェックは、すべてのスクリプト可能ブラウザで最も簡単な方法で表現されます:ブール値のプロパティ。

var checkbox = document.getElementById("foo"); 
alert(checkbox.checked); 
を...と、以下のように設定します。:これで終わりです

checkbox.checked = false; 

をので、あなたは次のようにそのチェック状態を取得することができます... HTML

<input id="foo" type="checkbox" checked> 

与えられました。

jQueryは、1回の呼び出しで複数の要素を処理できるという利点があります。 jQuery 1.6以降ではprop()でこれを行います。以前のバージョンでは、attr()を使用してください。

$("#foo").prop("checked", false); 

は試してみて、直接属性に対処しないでください。単に checkedプロパティを使用して、あなたは間違って行くことは決してないだろう。これは、HTMLを扱うときには、ほとんどすべての属性を処理します。

0

限り、checked属性が存在する限り、値をfalseに設定しても、ボックスにチェックを入れてください。checked="false"example

しかし、私は通常checked="checked"を使用していますが、クロスブラウザの不一致には問題がありませんでした。

しかし、MDN documentationでは、ブール値を文字列として使用することが推奨されています(意味があります)。しかし、私の上記の例では、FireFox 5でchecked="false"はまだ要素をチェックしました。

私は通常、それをチェックし、私は問題がなかっただかどうかをチェックするために、これを行う
+0

ありがとうございました。はい。しかし、jqueryを削除してチェックを外すと、チェックされているようにブラウザによって翻訳された 'checked =" "'と同じようになります。場合によっては:) – Ginnani

+0

ブラウザのバージョンやjQueryのバージョンなど、この問題の具体的な例を教えてください。 –

2

:チェックするには

$('#button').click(function(){ 
    var chk = $('#chk') 
    if(chk.is(':checked')){ 
     chk.prop('checked', false); 
    }else{ 
     chk.prop('checked', true); 
    } 

}); 

か:

$('#chk').click(function(){ 
    $('#show').toggle($(this).is(':checked')); 
}); 

、これはチェックするために/(jqueryの1.6以上)、それをオフにしますjqueryのチェックを外すと、prop()は特にプロパティを対象としているので常に使用するべきです。純粋なHTMLで

私が思う正しい方法は、(チェックボックスをチェックしたくない場合はチェックをコースオミットの)です:

<input id='chk' type='checkbox' checked value='1'> 

フィドル:JavaScriptでhttp://jsfiddle.net/TTWVd/2/

+0

nice!前に.prop()を使用したことはありません。私はより多くの研究をするつもりです。デモのおかげで – Ginnani

+0

'checked'( 'selected'のような)は属性で属性ではないので、propを使うべきです –

+0

@Nicola:いいえ、 'checked'は確かに属性であり、DOMのBooleanプロパティに反映されます。 jQueryは人々に真剣にこのようなものを混乱させています。実際は単純です。@ Quentinの答えをご覧ください。 –

0

、プロパティbooleanです。 HTMLの場合、プロパティは"checked"になります(これはW3 standardsにも表示されます)。(チェックされていれば、HTML内のブール値は一般的にproperty namesがそのW3リファレンスを見つけることはできませんが、それは真です) 。

3

checked属性はboolean attributeです。 1つの値と1つの値のみをとります:checked。これはnot changed in HTML 5です。

checked="checked" 

HTML(XHTMLとは対照的に)を記述している場合は、値だけを提供することができます。 JavaScriptが、値true又はfalseを割り当てることができるchecked性に

  checked 

。それ以外の値は変換されます(たとえば"checked"は文字列なので、文字列を変換する規則に従って変換され、trueになります)。

+0

TimとQuentinに感謝します。 – Ginnani

関連する問題