Machen Sie Kontrollkästchen zu einer Gruppe von Radio-Button

Question

Ich kann nicht input gleichen Namen oder Wert gleich. Der zweite und der dritte Eingang kommen aus einer Schleife mit c# Rasierer. Ich habe 2 Sätze von Radio-Eingänge ersten ist ein Satz und zweiten und dritten sind ein anderes Set. Da der zweite und der dritte den gleichen Namen haben, wird beim Aktivieren von eins der andere deaktiviert. Ich möchte das gleiche für alle zusammen, also wäre es so, als hätte ich einen Satz von 3 Radioknöpfen. Wie ich oben gesagt habe, kann ich den Namen oder den Wert aufgrund von Problemen mit der Ausgabe von Backend-Daten nicht angeben. Hier ist mein Versuch unten.

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

Wenn Sie sie alle die gleiche Klasse geben kann, dann können Sie nur jQuery verwenden, um festzustellen, wann eine Änderung und dann deaktivieren Sie andere Gegenstände in der gleichen Klasse aufgetreten ist.

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

Oder, wenn Sie sie nicht die gleiche Klasse geben kann, ersetzen Sie einfach den Wähler mit etwas, das beide Sätze auswählt (in meinem Beispiel "#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>