Checkbox :已选中jQuery检测

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');