如何使两个具有相同名称的单选按钮块在HTML中分开？

Question

I need to use two blocks of radio buttons for my project in which I'm storing the values in the Database and I'm showing one radio buttons block or the other depending on another result in the HTML form.

The problem is if I use the same name for all the options they are all part of the same group, which I don't want.

I just want to give it a try and ask if there's a way to group it in different blocks with the same name, is this even possible?

This is my sample code in JSfiddle

And mi code:

<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

Your problem can easily be solved, if you give them same classes. Change your code to this :

<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

Or if for some reason you don't want to use class then you can use data-customclass attribute, your code will look like this :

<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 .