Question

我无法使input名称相同或相同。第二个和第三个输入来自使用c# razor的循环。我有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>

使复选框成为一组单选按钮

2 个答案: