Получить значение Radiobutton с помощью JS

Проблема: я не смог получить значение радиобуйтона или значение в текстовом поле.Получить значение Radiobutton с помощью JS

Из проб и ошибок, я обнаружил, что следующее дает мне доступ к информации в сНу gender1

Я не мог понять, как получить значение пола или возраста. Я попытался добавить значение .value/.value(), используя атрибут id и т. Д. Я также пробовал различные методы из связанного вопроса о переполнении стека (Get Radio Button Value with Javascript), но имел небольшой успех.

var checkedRadio = document.querySelectorAll('.w3-container')[0] 
 
         .querySelectorAll('#box')[0] 
 
        .querySelector('#gender1'); 
 

 
console.log(checkedRadio);

<body> 
 
    <div class="w3-container"> 
 
    <div id="box" style="width:600px;height:650px;padding:10px;border:2px solid black;"> 
 
     <h5><b>Age (years):</b></h5> 
 
     <div id="age"> 
 
     <input type="number" name="age1"> 
 
     <br> 
 
     </div> 
 
     <div id="gender1"> 
 
     <h5><b>Male or Female?</b>: 
 
        <input type="radio" id="r1" name="gender" value="Male"> Male 
 
        <input type="radio" id="r2" name="gender" value="Female"> Female 
 
       </h5> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

источник

2017-01-29 user2657817

вы можете использовать

document.querySelector('input[name="gender"]:checked').value

, чтобы получить значение.

document.getElementById("btn_click").addEventListener("click", function(){ 
 

 
    
 
    if(document.querySelector('input[name="age1"]').value !== "" && document.querySelector('input[name="gender"]:checked') !== null) 
 
    { 
 
    console.log("Age : ", document.querySelector('input[name="age1"]').value); 
 
    console.log("Gender : ", document.querySelector('input[name="gender"]:checked').value); 
 
    } 
 
    else 
 
    { 
 
    console.log("Please provide all the details.") 
 
    } 
 
});

<body> 
 
    <div class="w3-container"> 
 
    <div id="box" style="width:600px;height:650px;padding:10px;border:2px solid black;"> 
 
     <h5><b>Age (years):</b></h5> 
 
     <div id="age"> 
 
     <input type="number" name="age1"> 
 
     <br> 
 
     </div> 
 
     <div id="gender1"> 
 
     <h5><b>Male or Female?</b>: 
 
        <input type="radio" id="r1" name="gender" value="Male" > Male 
 
        <input type="radio" id="r2" name="gender" value="Female"> Female 
 
       </h5> 
 
     </div> 
 
     <input type="button" id="btn_click" value="Click"> 
 
    </div> 
 
    </div> 
 
</body>

источник

2017-01-29 09:17:12 Deep

Спасибо Глубоко! Однако при тестировании этого ответа, похоже, для этого требуется выбрать одну из радиокнопок, иначе она вернет значение null. Правильно ли я это утверждаю? – user2657817

@ user2657817 это имеет значение? потому что когда страница загружается, радиокнопки не будут выбраны ... Обратите внимание, что Deep имеет атрибут 'checked' в' # r2' ... – kukkuz

@ user2657817 Я только что изменил фрагмент, чтобы пользователь сначала выбирал значения, а затем распечатать список. Поскольку предыдущий фрагмент печатал значения на загрузке страницы, я помещаю проверенный атрибут в сам html, как объяснил куккуз. – Deep

Вы можете использовать querySelector для выбора текстового поля значение или значение из проверили кнопку радио, как это:

var age = document.querySelector('input[type=number][name=age1]').value; 
var gender = document.querySelector('input[type=radio]:checked').value;

Посмотреть демо ниже:

function submit() { 
 

 
    var age = document.querySelector('input[type=number][name=age1]').value; 
 
    var gender = document.querySelector('input[type=radio]:checked').value; 
 

 
    console.log(age, gender); 
 

 
}

<div class="w3-container"> 
 
    <div id="box" style="width:600px;height:650px;padding:10px;border:2px solid black;"> 
 
    <h5><b>Age (years):</b></h5> 
 
    <div id="age"> 
 
     <input type="number" name="age1"> 
 
     <br> 
 
    </div> 
 
    <div id="gender1"> 
 
     <h5><b>Male or Female?</b>: 
 
        <input type="radio" id="r1" name="gender" value="Male"> Male 
 
        <input type="radio" id="r2" name="gender" value="Female"> Female 
 
       </h5> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<button onclick="submit()">Click me</button>

источник

2017-01-29 09:17:23 kukkuz

Что произойдет, если у него есть несколько радиостанций на одной странице? –

Ataur Rahman Munna, я думаю, тогда вы можете просто использовать аргумент «имя» вместо типа, чтобы получить значения радиокнопки. – user2657817

:) 'document.querySelector ('#box input [type = radio]: checked')' можно использовать ... – kukkuz

Вы можете использовать яваскрипт OnClick события. Пожалуйста, смотрите в пример ниже,

<script> 
function getGender(gender) { 
    alert(gender); 
} 
</script>  
<body> 
     <div class="w3-container"> 
      <div id="box" style="width:600px;height:650px;padding:10px;border:2px solid black;"> 
       <h5><b>Age (years):</b></h5> 
       <div id="age"><input type="number" name="age1"><br></div> 
       <div id="gender1"> 
        <h5><b>Male or Female?</b>: 
         <input type="radio" id="r1" name="gender" onclick = "getGender(this.value)" value="Male"> Male 
         <input type="radio" id="r2" name="gender" onclick = "getGender(this.value)" value="Female"> Female 
        </h5> 
       </div> 
      </div> 
     </div> 
     </body>

ИЛИ

<script> 
function getValues() { 
    // Get value of selected radio button 
    var genderVal; 
    if (document.getElementById('r1').checked) { 
    genderVal = document.getElementById('r1').value; 
    } else if (document.getElementById('r2').checked) { 
    genderVal = document.getElementById('r2').value; 
    } 

    alert("Value of textbox:"+ document.getElementsByName("age1")[0].value+" Value of radio button:"+ genderVal); 
} 
</script> 

<body> 
    <div class="w3-container"> 
    <div id="box" style="width:600px;height:650px;padding:10px;border:2px solid black;"> 
      <h5><b>Age (years):</b></h5> 
      <div id="age"><input type="number" name="age1"><br></div> 
      <div id="gender1"> 
      <h5><b>Male or Female?</b>: 
       <input type="radio" id="r1" name="gender" onclick = "getGender(this.value)" value="Male"> Male 
       <input type="radio" id="r2" name="gender" onclick = "getGender(this.value)" value="Female"> Female 
      </h5> 
      </div> 
      <div> 
      <input type="button" value="GetValues" onclick="getValues()"> 
      </div> 
     </div> 
     </div> 
</body>

Надежда выше примеры являются полезными для вас.

источник

2017-01-29 09:51:42

Получить значение Radiobutton с помощью JS

ответ

Смежные вопросы