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

【问题标题】：Make check-boxes becoming one group of radio button使复选框成为一组单选按钮
【发布时间】：2017-10-27 18:13:40
【问题描述】：

我无法使input 名称相同或值相同。第二个和第三个输入来自使用c# razor 的循环。我有两组无线电输入，第一组是一组，第二组和第三组是另一组。因为第二个和第三个具有相同的名称，所以选中一个会使另一个未选中。我希望所有这些都相同，所以就像我有一组 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>

【问题讨论】：

不，你不能那样做。每组复选框必须具有不同的名称，否则它们将作为一个单元工作，单击其中一个组将取消单击所有其他组。 More Info
您可以使用html data 属性来保留Model.Facet.Key 而不是名称，然后为每个组使用相同的名称。
@James 我们不能使用 jquey 取消选中？
@AnuRajan，请看下面我的工作 sn-p

标签： javascript c# jquery html razor

【解决方案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']"）

【讨论】：

【解决方案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>

【讨论】：