复选框：选中检测与jQuery

我有一个复选框，如果选中将发送礼物作为月度礼物。如果复选框未选中，则礼物是单一礼物。复选框：选中检测与jQuery

我有什么：

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

而且回来，如果未选中

来源

2012-05-02 TikaL13

所以你真的想看到的输入，或者只是添加了隐藏的输入用户将看不到？ –

你真的希望单选按钮变成复选框吗？ –

只需添加用户不会看到的隐藏输入 – TikaL13

我会做

$('#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-02 16:52:01

他的问题必须有一个错字，对吧？使用两个复选框/单选按钮来完成这项工作的用法模型是什么？为什么会有这种变化？你的答案完全符合他的html建议，但它看起来......奇怪。 –

@JeffB是的，这是奇怪的，但这就是他问的。如果他打算另一件事我会改变我的代码:) –

我明白。我不是在批评你的答案，只是想向一个同伴回答呃。 –

这是你如何检查，如果您的复选框“检查'使用jquery：

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

来源

2012-05-02 16:43:27

如何检查它是否未选中？我想说如果检查显示这些如果unchcked不要添加这些隐藏的输入形式 – TikaL13

试试这个

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

（或）

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

来源

2012-05-02 16:44:43 coder

可以使用

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

来源

2012-05-02 16:45:30 Ollie

如果这些被隐藏的投入，我会做这样的服务器端。否则，如果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-02 16:46:56

谢谢你的解释。我完全理解在服务器端进行的操作，不幸的是，这必须在客户端完成，因此用户必须启用JavaScript。我会试试这个，看看它是否适合我。再次感谢！ – TikaL13

复选框：选中检测与jQuery

回答

相关问题