Javascript RADIO BUTTONS

JavaScript
1 
The following code creates radio buttons, but the onclick does not work:

type or paste code here

<div id='radio'></div>

<script>
    function radioclick(e){
            alert(' clicked ' + e.value);
    }
 $(document).ready(function(){
        var radios = ['Red', 'Yellow', 'Green'];
            
        $('#Radio').append('Choices: ');
        for (var value of radios)
        {
            $('#Radio').append(
                $('<input>').prop({
                    type: 'radio',
                    id: value,
                    name: 'rad',
                    value: value,
                    onclick: function(){alert(this.name);}
                })
            ).append(
                $('<label>').prop({
                    for: value,
                    onclick: 'radioclick(this)'
                }).html(value)
            )
}
//===============================================
// for example:
<html>
    <head>
    <meta charset="UTF-8">
  <title>RADIOS</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        function radioclick(e){
                alert(' clicked ' + e.value);
        }
        function buildRadios(){
            alert('buildRadios');
            var radios = ['Red', 'Yellow', 'Green'];
                
            $('#Radio').append('Choices: ');
            for (var value of radios)
            {
                $('#Radio').append(
                    $('<input>').prop({
                        type: 'radio',
                        id: value,
                        name: 'rad',
                        value: value,
                        onclick: function(){alert(this.name);}
                    })
                ).append(
                    $('<label>').prop({
                        for: value,
                        onclick: 'radioclick(this)'
                    }).html(value)
                )
        }
    </script>
        
</head>

<body onload="buildRadios()">
    <h1>HELLO</h1>
<div id='radio'></div>

</body>
</html>
2

First, I was not able to get the code you pasted above to work without some changes. For example, you have the id on the div set to radio but you are using #Radio in the JS. Id’s are case sensitive so you have to change one or the other. Also, you are missing a closing curly brace right before the closing </script> tag.

The reason the click handler doesn’t work on the radio buttons is because there isn’t a click event for radio buttons. The event you are looking for is the change event. Also, you can’t add the event handler through the jQuery prop method. You attach it to the element with the jQuery change method. Finally, you don’t need to add a click handler to the labels because they become part of the radio button since you are using a label element with a for attribute to connect them. So clicking on the label will trigger the change event on the input.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.