-1

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

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

2 回答 2

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

检查小提琴

于 2013-08-23T22:13:23.850 回答
0

如果您查看http://api.jquery.com/prop/您会注意到 .prop("checked") 返回 true 或 false 而 .prop("checked", true) 分配了值 'true'到属性“检查”。尝试将它们切换出去，看看会发生什么。

于 2013-08-23T22:17:04.743 回答