2

HTML の同じ行で右から左へのラジオ ボタンを使用すると、問題が発生することに気付きました。ラジオ「ボタン」は、期待どおりに関連するテキストと一致しません。グループ 1 のラジオはグループ 4 のラベルの隣にありますが、他のボタンは期待どおりに並んでいるようです。これは、複数のブラウザで発生します。

これは予想される動作ですか？右から左への言語を使用する人はこれを理解できますか?

ここでコードを試すことができます: http://jsfiddle.net/6U9fw/

<div dir="rtl">
<input name="group" id="group1" type="radio" value="group1" />
<label for="group1">group1</label>
<input name="group" id="group2" type="radio" value="group2" />
<label for="group2">group2</label>
<input name="group" id="group3" type="radio" value="group3" />
<label for="group3">group3</label>
<input name="group" id="group4" type="radio" value="group4" />
<label for="group4">group4</label>
</div>
<input type="button" onclick="alert($('input[type=radio]:checked').val())" value="click" />
4

2 に答える 2

3

あなたのコードが適切に期待どおりに機能しているとは思いませんrtl。

この jsfiddleをチェックしてください。&rlm;各inputタグとそれに関連するテキストの間に追加しました。これはこのバグの回避策であり、その結果は、私が期待した出力であると私が信じているものを生成します。

<div dir="rtl">
<input name="group" id="group1" type="radio" value="group1" />&rlm;
<label for="group1">group1</label>
<input name="group" id="group2" type="radio" value="group2" />&rlm;
<label for="group2">group2</label>
<input name="group" id="group3" type="radio" value="group3" />&rlm;
<label for="group3">group3</label>
<input name="group" id="group4" type="radio" value="group4" />&rlm;
<label for="group4">group4</label>
</div>
<input type="button" onclick="alert($('input[type=radio]:checked').val())" value="click" />
于 2013-03-05T17:58:16.483 に答える
2

あなたのdivはrtlですが、ラベルはltr言語である英語であるため、正しく動作しません。ヘブライ語などの RTL 言語でラベルを使用すると、問題も自然に解決されます。RTL div では、とにかく RTL 言語のラベルが必要になるでしょう。

次に例を示します。

<div dir="rtl">
<input name="group" id="group1" type="radio" value="group1" />
<label for="group1">קבוצה א</label>
<input name="group" id="group2" type="radio" value="group2" />
<label for="group2">קבוצה ב</label>
<input name="group" id="group3" type="radio" value="group3" />
<label for="group3">קבוצה ג</label>
<input name="group" id="group4" type="radio" value="group4" />
<label for="group4">קבוצה ד</label>
</div>
<input type="button" onclick="alert($('input[type=radio]:checked').val())" value="click" />

非 RTL ラベルを持つ RTL div が必要な場合は、bidi 分離を使用することもできます。

<div dir="rtl">
<input name="group" id="group1" type="radio" value="group1" />
<label for="group1" style="unicode-bidi: -moz-isolate; unicode-bidi: -webkit-isolate; unicode-bidi: isolate;">group1</label>
<input name="group" id="group2" type="radio" value="group2" />
<label for="group2" style="unicode-bidi: -moz-isolate; unicode-bidi: -webkit-isolate; unicode-bidi: isolate;">group2</label>
<input name="group" id="group3" type="radio" value="group3" />
<label for="group3" style="unicode-bidi: -moz-isolate; unicode-bidi: -webkit-isolate; unicode-bidi: isolate;">group3</label>
<input name="group" id="group4" type="radio" value="group4" />
<label for="group4" style="unicode-bidi: -moz-isolate; unicode-bidi: -webkit-isolate; unicode-bidi: isolate;">group4</label>
</div>
<input type="button" onclick="alert($('input[type=radio]:checked').val())" value="click" />

スタイル仕様に注意してください。

このソリューションは ‏ を追加するよりも洗練されていますが、残念ながら Microsoft Internet Explorer では機能しません。

于 2013-03-06T18:21:55.810 に答える