web-dev-qa-db-ja.com

同じ名前の複数のラジオボタングループ

HTMLを動的に作成する複雑なアプリケーションが受け継がれています。

問題は、前の人がラジオボタンの「名前」属性が実際にはグループの関連付けであることを知らなかったということです。

次のマークアップで、これらを2つのグループに入れる方法はありますか

<div>
  <%-- would like this to be a seperate group without changing name--%>
  <label class="radio-inline"><input type="radio" name="radio" value="1">Group 1 Option 1</label>
  <label class="radio-inline"><input type="radio" name="radio" value="2">Group 1 Option 2</label>
  <label class="radio-inline"><input type="radio" name="radio" value="3">Group 1 Option 3</label>
</div>

<div>
  <%-- would like this to be a seperate group without changing name--%>
  <label class="radio-inline"><input type="radio" name="radio" value="1">Group 2 Option 1</label>
  <label class="radio-inline"><input type="radio" name="radio" value="2">Group 2 Option 2</label>
  <label class="radio-inline"><input type="radio" name="radio" value="3">Group 2 Option 3</label>
</div>

グループ化を分離するためにそれらをラップできるdivまたは何かがありますか？フィールドセットと凡例を試しましたが、効果がありません。それぞれをフォームに入れることはできますが、すべてが送信されるわけではありません。

javascripthtmlradio-button
10
clamchoda

それらを別のフォームタグに入れます

<form>
  <label class="radio-inline"><input type="radio" name="radio" value="1">Group 1 Option 1</label>
  <label class="radio-inline"><input type="radio" name="radio" value="2">Group 1 Option 2</label>
  <label class="radio-inline"><input type="radio" name="radio" value="3">Group 1 Option 3</label>
</form>

<form>
  <label class="radio-inline"><input type="radio" name="radio" value="1">Group 2 Option 1</label>
  <label class="radio-inline"><input type="radio" name="radio" value="2">Group 2 Option 2</label>
  <label class="radio-inline"><input type="radio" name="radio" value="3">Group 2 Option 3</label>
</form>
10
RJ.Hwang

私の知識から、あなたはできません。ラジオボタンの名前はそれが属するグループを定義し、送信されたフォームのハンドラーで、名前を呼び出して選択したオプションを取得します。行区切り記号またはdivを使用しても、それらの関連付けは解除されません。選択したグループのラジオボタンは1つだけです。それらを視覚的に分離したいだけなら、オースティンは正しい考えを持っています。

個々のグループの名前を変更することは、2つの選択されたボタンを許可する唯一のオプションです。

0
Ryan