Question

I am having trouble checking whether there is a radio selection is not made in my form. In my form, I have 5 items, each item is given 2 options (radio buttons). Something like this:

item 1    opt1   opt2   (name attribute is "1")
item 2    opt1   opt2   (name attribute is "2")
item 3    opt1   opt2
item 4    opt1   opt2
item 5    opt1   opt2

I have given all input radio buttons the same class name as items are generated dynamically, so are the name attribute of the input. Here is my code of check each item:

$(document).ready(
    function(){
        $('#submit').click(function(){
                var buttons = document.getElementsByClassName('radio_class');
                var radio_num = buttons.length; //which returns 10 in this case
                var error = "";
                for (var i=0; i<radio_num; i=i+2){
                    var radio_name = buttons[i].getAttribute("name");
                    if (!$("input[@name=radio_name]:checked").val()) {
                        error += radio_name + " ";
                    }
                }
                if (error !== "") {
                    alert (error+"not checked!");
                    return false;
                }
                else {
                    alert ("All the items have been checked.")
                }
            }
        );
    }
);

If all the five items are not checked, it alerts the correct message that is “1 2 3 4 5 not checked”, however, if I just check one item, the message “All the items have been checked.” will be alerted. Can anyone help me with this? Thanks.

Answer 1

where you wrote

if (!$("input[@name=radio_name]:checked").val()) {
    error += radio_name + " ";
}

try instead

if (!$("input[name='"+radio_name+"']:checked").val()) {
    error += radio_name + " ";
}