如果带有单选按钮的语句未分配变量

Question

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

我尝试链接“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;
}

Answer 1

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;
}

Check Fiddle

Answer 2

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