带有单选按钮的If语句不分配变量

If statements with radio buttons not assigning variables

本文关键字：分配 变量 语句 If 单选按钮      更新时间：2023-09-26

我正在努力学习表单构建。我有一个表单，我想根据选择的单选按钮，将某些变量的值分配给某些表单字段。但我的代码总是默认为第一个收音机选项，无论我选择哪一个。

我曾尝试将"if"条件、if/else条件链接起来并更改变量名，但这并没有什么区别。

我还发现代码在JSfiddle中不起作用(http://jsfiddle.net/GEZPU/1/)，但我不确定为什么它说函数没有定义？。

HTML

    Input 1
<select id="box0">
    <option>Tampa</option>
    <option>Phoenix</option>
</select>
<br>
<br>Input 2
<select id="box1">
    <option>Bucs</option>
    <option>Cards</option>
</select>
<br>
<br>If option radios
<br>
<br>
<input type="radio" id="box2" name="football" value="No Data">No Data
<br>
<br>
<input type="radio" id="box3" name="football" value="No Playoffs">No Playoffs
<br>Games to go?
<input id="box4" size="10">Superbowl location?
<input id="box5" size="10">
<br>
<br>
<input type="radio" id="box6" name="football" value="Yes Playoffs">Made Playoffs
<br>Superbowl location?
<input id="box7" size="10">
<p>
    <input value="Write summary" onclick="writetext()" type="button">
    <br>
    <form>
        <textarea rows="35" cols="45" placeholder="Template" id="output"></textarea>
    </form>
    <br>
</p>

代码

    function writetext() {
    var mytext = document.getElementById('output');
    var captext = "";
    // Checklist variables
    var box_0 = $("#box0").val();
    var box_1 = $("#box1").val();
    captext += box_0 + "'n - " + box_1 + "'n ";
    if ($('#box2').prop("checked ", true)) {
        var box_margin = $("#box2").val();
        captext += "'nMargins: 'n - " + box_margin + "'n ";
    }
    if ($('#box3').prop("checked ", true)) {
        var box_margin2 = $("#box3").val();
        var box_margin_dist = $("#box4").val();
        var box_margin_site = $("#box5").val();
        captext += "'nMargins: 'n - " + box_margin2 + "'n - Dist: " + box_margin_dist + "'n - margin " + box_margin_site + "'n ";
    }
    if ($('#box6').prop("checked ", true)) {
        var box_margin3 = $("#box6 ").val();
        var box_margin_site3 = $("#box7 ").val();
        captext += "'nMargins: 'n - " + box_margin3 + "'n - (Specify margin)" + box_margin_site3 + "'n ";
    }
    mytext.value = captext;
}

if ($('#box2').prop("checked ", true)) {

总是正确的。我想你是在试图比较它是真是假。

应该是

if ($('#box2').prop("checked ")) {

避免内联附加事件总是一个好主意。使用javascript 附加事件

您也可以简单地使用is(':checked')方法来检查收音机是否已检查。

我观察到您在多个地方使用同一个jQuery对象。最好在这种情况下缓存它们，因为这样可以提高性能。

同样的代码也可以进行一些重构。。

更新

$('#write').click(write);
function write() {
    var mytext = document.getElementById('output'),
        captext = "",
        // box elements
        $box_0 = $('#box0'),
        $box_1 = $('#box1'),
        $box_2 = $('#box2'),
        $box_3 = $('#box3'),
        $box_4 = $('#box4'),
        $box_5 = $('#box5'),
        $box_6 = $('#box6'),
        $box_7 = $('#box7'),
        // Checklist variables
        box_0 = $box_0.val();
    box_1 = $box_1.val();
    captext += box_0 + "'n - " + box_1 + "'n ";
    // All the radios have the same name.
    // So only 1 radio will be checked at any point of time
    // This would give you the radio that is checked
    var $radio = $('input[type=radio][name=football]:checked');
    if ($radio.length) {
        captext += "'nMargins: 'n - " + $radio.val() + "'n ";
        if ($radio.is($box_3)) {
            captext += "'n - Dist: " + $box_4.val() + "'n - margin " + $box_5.val() + "'n ";
        } else if ($radio.is($box_6)) {
            captext += "'n - (Specify margin)" + $box_7.val() + "'n ";
        }
    }
    mytext.value = captext;
}

检查Fiddle

如果您查看http://api.jquery.com/prop/您会注意到.prp（"checked"）返回true或false，而.prp（"checked"，true）将值true分配给属性"checked"。试着把它们换掉，看看会发生什么。

相关文章：