Я хочу, чтобы мой код получал проверенное значение переключателя, когда пользователь нажимает кнопку сохранения. Я выложил код, но я не уверен, как переключаться между переключателями, так как у них нет идентификатора класса? Вот что у меня есть:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
saveButton.onclick = function() {       
    // Go through shirtColor rabio buttons to see which one is ticked
    for (var i = 0; i < shirtColor.length; i++) {
        if (.checked = true) {
            // Set shirtColor variable to selected color
            var shirtColor = .checked;

            // Only one value can be selected so we're done
            return;
        }
    }
};
</script>
</head>

<body>
<p>Shirt Color:
<input type="radio" name="shirtColor" id="red" value="red" />
Red
<input type="radio" name="shirtColor" id="green" value="green" />
Green
<input type="radio" name="shirtColor" id="blue" value="blue" /> 
Blue</p>
<p>
<input type="button" id="saveButton" value="Save">
</p>
</body>
</html>
0
user1822824 31 Янв 2013 в 01:53

3 ответа

Лучший ответ

С простым Javascript вы можете сделать:

saveButton.onclick = function() {       
    // Go through shirtColor rabio buttons to see which one is ticked
    var shirtColors = document.getElementsByName("shirtColor");
    for (var i = 0; i < shirtColors.length; i++) {
        var shirtColor = shirtColors[i];
        if (shirtColor.checked) {
            // Set shirtColor variable to selected color
            alert(shirtColor.value);

            // Only one value can be selected so we're done
            return;
        }
    }
};

Смотрите эту скрипку.

1
Jacco 30 Янв 2013 в 22:06

Ты рядом. Вам нужно обернуть это в <form>, чтобы дать сценарию некоторый контекст. Вам не нужны идентификаторы в этом случае.

saveButton.onclick = function() {       
    var shirtColor = document.forms[0].shirtColor;
    for (var i = 0; i < shirtColor.length; i++) {
        if (shirtColor[i].checked == true) {
             return shirtColor[i].value;
        }
    }
}
0
Diodeus - James MacFarlane 30 Янв 2013 в 21:57

Вам нужно изменить цикл for на

var cboxes = document.getElementsByName('shirtColor');
for(var i = 0; i < cboxes.length ; i++
{
    if(cboxes[i].checked)
        shirtColor = cboxes[i];
}

Однако, если вы используете jquery, было бы гораздо проще:

var shirtColor = $("input[name='shirtColor']:checked").val();
0
Mike 30 Янв 2013 в 22:00