Hello! There is a form:

<div id="browsers"> <p><b>Браузер:</b><Br> <input type="radio" name="browser" value="ie"> Internet Explorer<Br> <input type="radio" name="browser" value="opera"> Opera<Br> <input type="radio" name="browser" value="firefox"> Firefox<Br> </p>

How to use JavaScript (without using libraries like jQuery) to find out the value value , if the user clicked on the radio button?

Those. when clicking on Internet Explorer in the 'ie' console, when clicking on Opera - 'opera'

    3 answers 3

     var check = document.querySelectorAll('input[type="radio"]'); for (var i=0;i<check.length;i++){ check[i].addEventListener('click', function(event) { alert(this.value) }); }
    • Thanks for the answer. But you need JavaScript without using the jQuery library - Pavel
    • @Pavel, rewritten on js - cheburashkarf
    • Thanks you! Works great! - Pavel
    • Somehow not rewritten - the code on jQuery did not the same as this one. - Qwertiy ♦
    • one
      @cheburashkarf, this answer has 3 versions - the second one contains the option with jQuery, and the third one is the current one. There is also a comment: "rewritten to js" - without it, I would be in a revision and would not be useful to watch. I'm talking about the fact that the jQuery code from the second revision is similar to the code in my answer. And the code in this answer is not equivalent to jQuery code, because instead of using ascent it hangs up a few handlers. And about the fact that one of us and how I answered earlier, I didn’t say anything at all. - Qwertiy ♦

     document.getElementById("browsers").addEventListener('change', function (e) { document.getElementById("selected-browser").textContent = e.target.value; }); 
     label { cursor: pointer; } 
     <div id="browsers"> <h3>Браузер (<output id="selected-browser">?</output>)</h3> <label><input type="radio" name="browser" value="ie"> Internet Explorer</label><br> <label><input type="radio" name="browser" value="opera"> Opera</label><br> <label><input type="radio" name="browser" value="firefox"> Firefox</label> </div>

    • Plus for the only normally working snippet. - Nick Volynkin ♦

     function radioClick(radioItem){ alert(radioItem.value); } 
     <div id="browsers"> <p> <b>Браузер:</b> <br> <input type="radio" name="browser[]" value="ie" onclick="radioClick(this);"> Internet Explorer<br> <input type="radio" name="browser[]" value="opera" onclick="radioClick(this);"> Opera<br> <input type="radio" name="browser[]" value="firefox" onclick="radioClick(this);"> Firefox<br> </p> </div>

    • Thanks for the answer, but you need input should be without onclick = "radioClick (this);". Those. you need an analog jquery: $ ("# browsers"). on ('click', 'input [type = radio]', function () {} - Pavel