In JavaScript, come posso ottenere tutti i pulsanti di opzione nella pagina con un determinato nome.

Come dice il titolo, qual è il modo migliore in JavaScript per ottenere tutti i pulsanti di scelta su una pagina con un determinato nome. In definitiva, io uso questo per determinare quale pulsante è selezionato, quindi un altro modo di formulare la domanda:

Dato una variabile stringa in JavaScript, come posso sapere in quale esatto della radio pulsante elemento di input (se presente) con la stringa nome è selezionato?

Sto non utilizzando jQuery. Se si desidera fornire un jQuery risposta, andare avanti. Qualcuno potrebbe trovare utile. Ma non sarà di aiuto a me e io non votarlo.

  • Io so che lo è. Ho scritto su di esso a lunghezza: stackoverflow.com/questions/148670/… Ma non è da me.
  • Wow, è una buona cosa che il link a Wikipedia/Javascript è stato aggiunto perché ero totalmente all’oscuro!
  • Mortensen: sempre un po ‘ felice, modifica trigger non ci sono ya?

 

8 Replies
  1. 25

    È possibile utilizzare document.getElementsByName(), passando il nome del gruppo di scelta, poi un ciclo su di loro, ispezionando il checked attributo, ad esempio, qualcosa come:

    function getCheckedValue( groupName ) {
        var radios = document.getElementsByName( groupName );
        for( i = 0; i < radios.length; i++ ) {
            if( radios[i].checked ) {
                return radios[i].value;
            }
        }
        return null;
    }
    • Questo potrebbe includere <input type="checkbox" /> con lo stesso nome.
    • Mmm… stavo pensando che non avrebbe potuto funzionare a causa di le caselle di controllo. Che era un po ‘ il problema principale. Ma ora mi rendo conto che può aggiungere un’espressione di se la condizione di filtro da tagname, quindi questo dovrebbe funzionare per me.
    • Penso che dire filtro da type. Tagnames sarebbe la stessa “input”.
    • Checkbox con lo stesso name attributo stanno andando a rovinare l’invio del modulo comunque, quindi io non mi preoccuperei.
    • getElementsByName vs getElementByName che un coccodrillo.
  2. 8

    Uso del documento.getElementsByName() è la risposta breve alla domanda che hai chiesto.

    Tuttavia, può essere meglio fare qualcosa di simile a questo:

    <form name="formFoo">
      Foo: <input type="radio" name="groupFoo" value="foo" checked> <br />
      Bar: <input type="radio" name="groupFoo" value="bar"> <br />
      Baz: <input type="radio" name="groupFoo" value="baz"> <br />
      <input type="submit" >
    </form> 

    Quindi utilizzare JavaScript:

    function getRadioValue(formName, groupName) {
        var radioGroup = document[formName][groupName];
        for (var i=0; i<radioGroup.length; i++)  {
           if (radioGroup[i].checked)  {
           return radioGroup[i].value;
           }
        }
        return null;
    }

    In questo modo, si evita di dover utilizzare una funzione che cerca l’intero documento. Appena prima ricerca per la forma, poi all’interno di tale modulo per i controlli, con il suo stesso nome. Il problema qui è che se si dovesse avere una casella di controllo nel centro di form con lo stesso nome, potrebbe essere restituito invece del corretto valore radio. Se un altro tipo di controllo è stato lanciato con lo stesso nome, quindi potrebbe causare un errore. Entrambe queste circostanze, probabilmente, dovrebbe essere considerato programmatore di errore, ma non sarebbe male per la funzione che deve essere ampliato per controllare per loro, a un certo potenziale perdita di prestazioni. Basta cambiare la riga:

           if (radioGroup[i].checked)  {

    a:

           if (radioGroup[i].type=='radio' && radioGroup[i].checked)  {
    • Penso documento.forma.groupFoo[i].valore dovrebbe essere il documento.formFoo.groupFoo[i].valore.
    • Ho rivisto l’intera funzione, ed effettivamente testato questa volta, ma è stato giusto.
  3. 6

    getElementsByName non ha funzionato per me. Ho fatto questo:

        var radios = document.getElementsByTagName('input');
        for (i = 0; i < radios.length; i++) {
            if (radios[i].type == 'radio' && radios[i].checked) {
                nbchecked++;
            }
        }
  4. 3
    var options = document.getElementsByName('myRadioButtons');
    for(i = 0; i < options.length; i++)
    {
        var opt = options[i];
        if(opt.type=="radio")
        {              
            if(opt.checked)
            {
            }                  
        }
    }
  5. 3

    I’ll bite per jQuery risposta

    var selectedValue = $("input[name='radio_name']:checked").val();
  6. 2
    <form name="myForm" id="myForm" action="">  
    <input type="radio" name="radioButton" value="c1">Choice 1
    <input type="radio" name="radioButton" value="c2">Choice 2
    </form>
    <script>
    var formElements = window.document.getElementById("myForm").elements;
    var formElement;
    var radioArray = [];
    
    for (var i = 0, j = 0; i < formElements.length; i++) {
        formElement = formElements.item(i);
        if (formElement.type === "radio" && formElement.name === "radioButton") {
            radioArray[j] = formElement;
            ++j;
        }
    }
    alert(radioArray[0].value);
    alert(radioArray[1].value);
    </script>
  7. 0

    Per ottenere tutti i pulsanti di opzione direttamente con il loro nome:

    element.querySelectorAll("input[name='nameOfTheName']")

    Il querySelectorAll() metodo può essere utilizzato per ottenere gli elementi di un certo tipo di nome. Ci sono vantaggi per l’utilizzo di querySelectorAll rispetto a getElementsByName() in determinate situazioni. Se si utilizza getElementsByName su qualcosa di diverso document, si otterrà un errore:

    element_Name_Here.getElementsByName non è una funzione

    Ma querySelectorAll() può essere utilizzato in sub-elementi del documento. Questo è utile quando si desidera ottenere un elemento di molteplici elementi che hanno tutti la stessa struttura (Righe in un elenco). In questo caso, si potrebbe desiderare di provare a dare un ID diverso per ogni riga. In tale situazione, la funzione di chiamata può essere passato this, ottenere il parentNode e dal genitore, ricerca per uno specifico attributo. Questo evita di dover cercare l’intero documento.

    html

    <div>
      <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
      <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
      <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
    </div>
    <div>
      <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
      <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
      <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
    </div>
    <div>
      <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
      <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
      <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
    </div>
    <div>
      <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
      <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
      <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
    </div>

    script

    function getOnlyThisRowsRadios(thiz) {
      var i,L,parentElement,radioButtons;
    
      parentElement = thiz.parentNode;//Get the parent of the element
      radioButtons = parentElement.querySelectorAll("input[name='nameOfTheName']");
      console.log('radioButtons: ' + radioButtons)
    
      L = radioButtons.length;
      console.log('L: ' + L)
    
      for (i=0;i<L;i++) {
        console.log('radBttns[i].checked: ' + radBttns[i].checked)
        radBttns[i].checked = false;//Un-check all checked radios
      }

Lascia un commento