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'赋予属性“检查”。尝试将它们切换出去，看看会发生什么。

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

2 个答案: