How to get the selected radio button’s value?

后端 未结 18 1571
北海茫月
北海茫月 2020-11-22 00:57

I’m having some strange problem with my JS program. I had this working properly but for some reason it’s no longer working. I just want to find the value of the radio button

相关标签:
18条回答
  • 2020-11-22 01:19
     document.querySelector('input[name=genderS]:checked').value
    
    0 讨论(0)
  • 2020-11-22 01:20

    Here is an Example for Radios where no Checked="checked" attribute is used

    function test() {
    var radios = document.getElementsByName("radiotest");
    var found = 1;
    for (var i = 0; i < radios.length; i++) {       
        if (radios[i].checked) {
            alert(radios[i].value);
            found = 0;
            break;
        }
    }
       if(found == 1)
       {
         alert("Please Select Radio");
       }    
    }
    

    DEMO : http://jsfiddle.net/ipsjolly/hgdWp/2/ [Click Find without selecting any Radio]

    Source : http://bloggerplugnplay.blogspot.in/2013/01/validateget-checked-radio-value-in.html

    0 讨论(0)
  • 2020-11-22 01:21

    Try this

    function findSelection(field) {
        var test = document.getElementsByName(field);
        var sizes = test.length;
        alert(sizes);
        for (i=0; i < sizes; i++) {
                if (test[i].checked==true) {
                alert(test[i].value + ' you got a value');     
                return test[i].value;
            }
        }
    }
    
    
    function submitForm() {
    
        var genderS =  findSelection("genderS");
        alert(genderS);
        return false;
    }
    

    A fiddle here.

    0 讨论(0)
  • 2020-11-22 01:22
     <input type=radio name=rdbExampleInfo id=rdbExamples value="select 1">
     <input type=radio name=rdbExampleInfo id=rdbExamples value="select 2">
     <input type=radio name=rdbExampleInfo id=rdbExamples value="select 3">
     <input type=radio name=rdbExampleInfo id=rdbExamples value="select 4"> 
    

    etc then use just

      $("#rdbExamples:checked").val()
    

    Or

       $('input[name="rdbExampleInfo"]:checked').val();
    
    0 讨论(0)
  • 2020-11-22 01:29

    Here's a nice way to get the checked radio button's value with plain JavaScript:

    const form = document.forms.demo;
    const checked = form.querySelector('input[name=characters]:checked');
    
    // log out the value from the :checked radio
    console.log(checked.value);
    

    Source: https://ultimatecourses.com/blog/get-value-checked-radio-buttons

    Using this HTML:

    <form name="demo">
      <label>
        Mario
        <input type="radio" value="mario" name="characters" checked>
      </label>
      <label>
        Luigi
        <input type="radio" value="luigi" name="characters">
      </label>
      <label>
        Toad
        <input type="radio" value="toad" name="characters">
      </label>
    </form>
    

    You could also use Array Find the checked property to find the checked item:

    Array.from(form.elements.characters).find(radio => radio.checked);
    
    0 讨论(0)
  • 2020-11-22 01:32

    lets suppose you need to place different rows of radio buttons in a form, each with separate attribute names ('option1','option2' etc) but the same class name. Perhaps you need them in multiple rows where they will each submit a value based on a scale of 1 to 5 pertaining to a question. you can write your javascript like so:

    <script type="text/javascript">
    
        var ratings = document.getElementsByClassName('ratings'); // we access all our radio buttons elements by class name     
        var radios="";
    
        var i;
        for(i=0;i<ratings.length;i++){
            ratings[i].onclick=function(){
                var result = 0;
                radios = document.querySelectorAll("input[class=ratings]:checked");
                for(j=0;j<radios.length;j++){
                    result =  result + + radios[j].value;
                }
                console.log(result);
                document.getElementById('overall-average-rating').innerHTML = result; // this row displays your total rating
            }
        }
    </script>
    

    I would also insert the final output into a hidden form element to be submitted together with the form.

    0 讨论(0)
提交回复
热议问题