Nemeth Attila Nemeth Attila - 7 months ago 17
Javascript Question

How can I get radio button value in this html page with javascript or jquery?

I have a html page like this. There are radio buttons inside a lot of div's. How can I get their values with JavaScript or jQuery?



<html>
<head> </head>
<body>
<div id="container">
<div id="surveyContainer">
<div class="optionsContainer">
<div class="imgAnsContainer">
<div class="asnwers">
<div class="radioContainer">
<div class="radioWrap">
<input name="tantargy1-tanar1" value="0" type="radio">
<label>0-20%</label>
</div>
<div class="radioWrap">
<input name="tantargy1-tanar1" value="1" type="radio">
<label>20-80%</label>
</div>
<div class="radioWrap">
<input name="tantargy1-tanar1" value="2" type="radio">
<label>80-100%</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>




Answer

You can get your values with click event

var radios = document.querySelectorAll('[type=radio]');
if (radios) {
  for (var i = 0; i < radios.length; i++) {
    radios[i].addEventListener('click', function() {
      alert(this.value);
    }, false);
  }
}
<html>

<head></head>

<body>
  <div id="container">
    <div id="surveyContainer">
      <div class="optionsContainer">
        <div class="imgAnsContainer">
          <div class="asnwers">
            <div class="radioContainer">
              <div class="radioWrap">
                <input name="tantargy1-tanar1" value="0" type="radio">
                <label>0-20%</label>
              </div>
              <div class="radioWrap">
                <input name="tantargy1-tanar1" value="1" type="radio">
                <label>20-80%</label>
              </div>
              <div class="radioWrap">
                <input name="tantargy1-tanar1" value="2" type="radio">
                <label>80-100%</label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>