Make check-boxes becoming one group of radio button

Question

I cannot make the input name same or value same. The second and third inputs come from a loop using c# razor. I have 2 sets of radio inputs first one is one set and second and third are another set. Because the second and third have the same name, checking one makes the other unchecked. I want the same for all of them together so it would be like I have one set of 3 radio buttons. Like I said above I am not able to make the name or value same due to back-end data display issue. Here is my attempt below.

//first radio <br/>

<div class="radio">
    <label>
        <input id="dcenter-allradio" type="radio" value="0" />All
    </label>
</div>


//this radio button is a loop <br>


<input type="radio" name="@Model.Facet.Key" value="@item.Key">tagitem.j
<div class="radio">
    <label>
        <input id="dcenter-listradio" type="radio" name="@Model.Facet.Key" value="@item.Key" />tagItem.Name
    </label>
</div>


<script>
    $(document).ready(function () {
        if ($('#dcenter-listradio').prop("checked", true)) {
            $('#dcenter-allradio').prop("checked", false);
        }

        if ($('#dcenter-allradio').prop("checked", true)) {

            $('#dcenter-listradio').prop("checked", false);
        }
    });
</script>

Answer 1

If you can give them all the same class, then you can just use jQuery to detect when a change has occurred and then uncheck other items in the same class.

 $(document).ready(function() { var selector = ".groupTogether"; // or if you can't give same class, you could use "#unrelatedRadio, input[name='related']" $(selector).change(function() { if(this.checked) { $(selector).not(this).prop('checked', false); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input id="unrelatedRadio" name="unrelated" type="radio" class="groupTogether">unrelated</input> <input id="relatedA" name="related" type="radio" class="groupTogether">Related A</input> <input id="relatedB" name="related" type="radio" class="groupTogether">Related B</input> 

Or, if you can't give them the same class, just replace the selector with something that selects both sets (in my example, "#unrelatedRadio, input[name='related']" )

Answer 2

 let radios = document.querySelectorAll("input"); for (let i of radios){ i.name="same" } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> //first radio <br/> <div class="radio"> <label> <input id="dcenter-allradio" type="radio" value="0" />All </label> </div> //this radio button is a loop <br> <input type="radio" name="@Model.Facet.Key" value="@item.Key">tagitem.j <div class="radio"> <label> <input id="dcenter-listradio" type="radio" name="@Model.Facet.Key" value="@item.Key" />tagItem.Name </label> </div>