web-dev-qa-db-ja.com

ラジオボタンの「チェック済み」属性が機能しない

デフォルトでは、ラジオボタンはcheckedとして表示されません。いくつかの非常に単純なjs検証を行うデフォルトの選択なしで始めましたが、動作しませんでした。それで、それを理解し、奇妙なことが起こっていることを発見するまで、デフォルト値を使用することを選択しました。

マークアップは有効であり、FF、Safari、Chromeで試しました。何も動作しません。

コールスクリプトを削除すると問題がなくなるため、jQueryライブラリとの競合だと思います。

<label>Do you want to accept American Express?</label> Yes
<input id="amex" style="width: 20px;" type='radio' name='Contact0_AmericanExpress' value='1' /> No
<input style="width: 20px;" type='radio' name='Contact0_AmericanExpress' class='check' value='0' checked="checked" />
htmlformsradio-button
64
Jordan

Checked属性を持つ同じ名前が複数ある場合、ページ上で最後にチェックされたラジオが使用されます。

<form>
    <label>Do you want to accept American Express?</label>
    Yes<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress"  />  
    maybe<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress"  checked="checked" />  
    No<input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked="checked" />
</form>
79
jeeves

これはそれかもしれません：

jQuery 1.9.1のラジオボタンにバグはありますか？

要するに、ラジオボタンのチェックにはattr（）ではなくprop（）を使用してください。神様JSが嫌い...

31
Martin T.

ラジオ入力は、「チェック済み」が機能するためにフォーム内になければなりません。

13
Michael Seltenreich

この迷惑な問題に対する究極のJavaScript回避策-

JQueryコマンドをsetTimeoutで囲むだけです。間隔は非常に小さくすることができ、10ミリ秒を使用し、うまく機能しているようです。遅延は非常に小さいため、エンドユーザーには事実上検出できません。

setTimeout(function(){
  $("#radio-element").attr('checked','checked');
},10);

これも動作します

  • $("#radio-element").trigger('click');
  • $("#radio-element").attr('checked',true);
  • $("#radio-element").attr('checked',ANYTHING_THAT_IS_NOT_FALSE);

Hacky ... hacky ... hacky ... hacky ...はい、わかっています...したがって、これは回避策です。

11
Lix

ちょっと私もajaxで生成されたページで同様の問題に直面していました。同じIDで、2番目のチェックボックスのIDを変更すると、機能し始めました。また、それを試すこともできます。

5
Codemator

コードをコピーしてください： http://jsfiddle.net/fY4F9/

デフォルトではチェックされていません。ラジオボックスに影響するjavascriptを実行していますか？

3
Ben Rowe

こんにちは、2番目の入力にid属性を設定し、一意のid値を指定すると機能すると思います

<label>Do you want to accept American Express?</label>
Yes<input id="amex" style="width: 20px;" type='radio' name='Contact0_AmericanExpress'   value='1'/>  
No<input style="width: 20px;" id="amex0" type='radio' name='Contact0_AmericanExpress' class='check' value='0' checked="checked"/>
1
mentes

JQueryのドキュメントには、 checkedプロパティと属性の詳細な説明 が記載されています。

したがって、選択したラジオボタンの値を取得する別の方法は次のとおりです。

var accepted = $('input[name="Contact0_AmericanExpress"]:checked').val();
1
Sudhir

コードは正しいので、JQueryスクリプトをデバッグして問題を見つけてください。 FFを使用している場合は、FireBugと呼ばれるJS（およびJQuery）をデバッグするための拡張機能をインストールできます。

0
thePanz

これを再現するには、次のような2つの入力グループに対してinputタグの名前を同じに設定します。

<body>
  <div>
      <div>
        <h3>Header1</h3>
      </div>
      <div>
          <input type="radio" name="gender" id="male_1" value="male"> Male<br>
          <input type="radio" name="gender" id="female_1" value="female" checked="checked"> Female<br>
          <input type="submit" value="Submit">
      </div>
  </div>


  <div>
      <div>
        <h3>Header2</h3>
      </div>
      <div>
          <input type="radio" name="gender" id="male_2" value="male"> Male<br>
          <input type="radio" name="gender" id="female_2" value="female" checked="checked"> Female<br>
          <input type="submit" value="Submit">
      </div>
  </div>
</body>

（この実行を確認するには、 here をクリックします）

次の2つの解決策は両方とも問題を解決します。

  1. 2番目のグループの入力に異なる名前を使用します
  2. グループの1つにformタグの代わりにdivタグを使用します（これが問題を解決する本当の理由を実際に理解することはできません。これについての意見をお聞かせください！）
0
Liutong Chen
**Radio button aria-checked: true or false one at a time**

$('input:radio[name=anynameofinput]').change(function() {
            if (this.value === 'value1') {
                $("#id1").attr("aria-checked","true");
                $("#id2").attr("aria-checked","false");
            }
            else if (this.value === 'value2') {;
                $("#id2").attr("aria-checked","true");
                $("#id1").attr("aria-checked","false");
            }
   });
0
user11097803