2

我有一个复选框，如果选中，它将作为每月礼物发送一份礼物。如果未选中复选框，则该礼物为单件礼物。

是）我有的：

<div id="monthly-right">
    <input type="checkbox" name="level_autorepeat" id="level_autorepeat" value="false" /> Yes, automatically repeat this gift every year on this date.</div>
<div id="donation-length"></div>

如果选中，我需要显示的内容：

<div id="monthly-right"><input type="checkbox" name="level_autorepeat" id="level_autorepeat" value="false" /> Yes, automatically repeat this gift every year on this date.</div>
<div id="donation-length">
    <input type=hidden name="sustaining.frequency" id="sustaining_frequency" value="monthly" />
    <input type="hidden" name="sustaining.duration" id="sustaining_duration" value="0" />
</div>

如果未选中则返回

4

5 回答 5

4

我会做

$('#check').click(function() {
    var type = $(this).is(':checked') ? "checkbox" : "radio";
    var input_r_or_c = $('<input />', {
        type: type,
        name: "level_autorepeat",
        id: "level_autorepeat",
        value: "false"
    });
    if ($(this).is(':checked')) {
        var input1 = $('<input />', {
            type: "hidden",
            name: "sustaining.frequency",
            id: "sustaining_frequency",
            value: "monthly"
        });
        var input2 = $('<input />', {
            type: "hidden",
            name: "sustaining.duration",
            id: "sustaining_duration",
            value: "0"
        });
        $('#donation-length').append(input1).append(input2);
    } else {
        $('#donation-length').empty();
    }
    $('#monthly-right input').replaceWith(input_r_or_c);
});

http://jsfiddle.net/vKLWA/1/

于 2012-05-02T16:52:01.000 回答
1

如果这些是隐藏输入，我会在服务器端执行此操作。否则，如果 javascript 被禁用，用户将不知道复选框没有做任何事情，并且可能会无意中做出单一或重复的贡献。

隐藏和显示隐藏的输入不会影响它们是否在提交时被发送到服务器。您将需要从 DOM 中实际删除它们，或者将它们移出当前表单。

所以基本上，总是发送隐藏的输入，但在服务器端，除非设置了复选框值，否则忽略频率/持续时间。

如果你仍然想用 javascript 来做，你需要这样做：

var freq = '<input type=hidden name="sustaining.frequency" id="sustaining_frequency" value="monthly" /><input type="hidden" name="sustaining.duration" id="sustaining_duration" value="0" />';

$('#monthly-right').on('change', '#level_autorepeat', function() {
   if($(this).is(':checked')) {
       $('#level_autorepeat').html(freq);
   } else {
       $('#level_autorepeat').html("");
   }
}

其他答案向您展示了如何检查复选框是否被选中，但您确实需要使用onchange处理程序来观察它何时发生变化，这是通过.on(). 我将处理程序附加到父级，并观察复选框何时更改。如果选中该复选框，我将频率/持续时间代码（存储在变量中）添加到 中div，否则我清除 div 中的 HTML。您可以通过多种方式执行此操作，包括将内容保存在表单之外的另一个 div 中，以及将内容移动/复制到 div 中。

于 2012-05-02T16:46:56.277 回答
0

这是您可以使用 jquery 检查您的复选框是否已“选中”的方法：

$('#your_checkbox_id').is(':checked');
于 2012-05-02T16:43:27.480 回答
0

试试这个

$('#checkBox').attr('checked');

（或者）

$('#checkBox').prop('checked');

于 2012-05-02T16:44:43.557 回答
0

您可以使用

 $('#donation-length').hide();
 if ($('#level_autorepeat').is(':checked')){
     $('#donation-length').show();
 }
于 2012-05-02T16:45:30.713 回答