javascript - 如何在 HTML 中将两个同名的单选按钮 block 分隔开？

Question

我需要在我的项目中使用两个单选按钮 block ，其中我将值存储在数据库中，并根据 HTML 表单中的另一个结果显示一个单选按钮 block 或另一个单选按钮 block 。

问题是，如果我对所有选项使用相同的名称，它们都属于同一组，这是我不希望的。

我只是想尝试一下，问问是否有办法将其分组到具有相同名称的不同 block 中，这可能吗？

这是我的sample code in JSfiddle

还有 mi 代码:

<fieldset data-role="controlgroup" data-type="horizontal" >
    <legend>Negotiated:</legend>
    <input type="radio" name="radio-view" id="radio-view-a" value="0" checked="checked" />
    <label for="radio-view-a">No</label>
    <input type="radio" name="radio-view" id="radio-view-b" value="1" />
    <label for="radio-view-b">Yes</label>
</fieldset>


<fieldset data-role="controlgroup" data-type="horizontal" >
    <legend>Negotiated:</legend>
    <input type="radio" name="radio-view" id="radio-view-a1" value="0" />
    <label for="radio-view-a1">No</label>
    <input type="radio" name="radio-view" id="radio-view-b1" value="1" checked="checked" />
    <label for="radio-view-b1">Yes</label>
</fieldset>

Answer 1

如果你给他们提供相同的类(class)，你的问题很容易解决。将您的代码更改为:

<fieldset data-role="controlgroup" data-type="horizontal" >
<legend>Negotiated:</legend>
<input type="radio" name="radio-view1" class="radio-view" id="radio-view-a" value="0" checked="checked" />
<label for="radio-view-a">No</label>
<input type="radio" name="radio-view1" class="radio-view" id="radio-view-b" value="1" />
<label for="radio-view-b">Yes</label>
</fieldset>


<fieldset data-role="controlgroup" data-type="horizontal" >
<legend>Negotiated:</legend>
<input type="radio" name="radio-view2" class="radio-view" id="radio-view-a1" value="0" />
<label for="radio-view-a1">No</label>
<input type="radio" name = "radio-view2" class="radio-view" id="radio-view-b1" value="1" checked="checked" />
<label for="radio-view-b1">Yes</label>
</fieldset>

JSFiddle

或者，如果由于某种原因您不想使用 class 那么您可以使用 data-customclass 属性，您的代码将如下所示:

<fieldset data-role="controlgroup" data-type="horizontal" >
<legend>Negotiated:</legend>
<input type="radio" name="radio-view1" data-customclass="radio-view" id="radio-view-a" value="0" checked="checked" />
<label for="radio-view-a">No</label>
<input type="radio" name="radio-view1" data-customclass="radio-view" id="radio-view-b" value="1" />
<label for="radio-view-b">Yes</label>
</fieldset>


<fieldset data-role="controlgroup" data-type="horizontal" >
<legend>Negotiated:</legend>
<input type="radio" name="radio-view2" data-customclass="radio-view" id="radio-view-a1" value="0" />
<label for="radio-view-a1">No</label>
<input type="radio" name="radio-view2" data-customclass="radio-view" id="radio-view-b1" value="1" checked="checked" />
<label for="radio-view-b1">Yes</label>
</fieldset>

JSFiddle

In the second approach, you can use any attribute prefixed with data-. For example, you can also use data-myclass.

But don't include uppercase letters,they are not allowed. If you are using any framework such as jQuery Mobile then don't use its reserved data- attributes such as data-role. Prefixing your attribute with 'my' is a good practice, for example, data-myclass.