Question

我有一个复选框，如果选中则会将礼物作为月礼物发送。如果未选中复选框，则礼物是一份礼物。

我有什么：

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

如果未经检查则返回

Answer 1

我愿意

$('#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/

Answer 2

如果这些是隐藏的输入，我会在服务器端执行此操作。否则，如果禁用了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中。

Answer 3

您可以使用jquery检查复选框是否已“检查”：

$('#your_checkbox_id').is(':checked');

Answer 4

试试这个

<强> $('#checkBox').attr('checked');

（或）

<强> $('#checkBox').prop('checked');

Answer 5

你可以使用

 $('#donation-length').hide();
 if ($('#level_autorepeat').is(':checked')){
     $('#donation-length').show();
 }

复选框：使用jQuery检查检测

5 个答案: