使復選框成為一組單選按鈕

Question

我不能使input名稱相同或值相同。 第二和第三輸入來自使用c#剃刀的循環。 我有2組無線電輸入，第一個是一組，第二和第三組是另一組。 由於第二個和第三個具有相同的名稱，因此選中一個將使另一個不選中。 我希望所有人都一樣，所以就像我有一組3個單選按鈕一樣。 就像我上面說的那樣，由於后端數據顯示問題，我無法使名稱或值相同。 這是我在下面的嘗試。

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

如果可以給他們全部相同的類，則可以使用jQuery檢測何時發生更改，然后取消選中同一類中的其他項。

 $(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> 

或者，如果您不能給他們相同的類，只需將選擇器替換為同時選擇兩個集合的東西（在我的示例中為"#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>