jquery - 选中复选框时调用的函数

Question

我有一个 Wordpress 选项，它是一个复选框，id="is_custom_colour"。

选中此复选框时，我希望显示一个隐藏选项。

我有在单击复选框时有效的代码，但如果选项“is_custom_colour”已被选中，则会失败。您必须单击它（取消选中它）才能显示隐藏的选项。

这是可以正常工作但功能不理想的原始代码（custom_colour 是隐藏选项的 id）：

<script type="text/javascript">
jQuery(document).ready(function($) {

    $('#is_custom_colour').click(function() {
        $('#section-custom_colour').fadeToggle(400);
    });

    if ($('#is_custom_colour:checked').val() !== undefined) {
        $('#section-custom_colour_hidden').show();
    }

});
</script>

如果我将其更改为

<script type="text/javascript">
jQuery(document).ready(function($) {

    if ($('#is_custom_colour:checked').val() !== undefined) {
        $('#section-custom_colour').fadeToggle(400);
    });

    if ($('#is_custom_colour:checked').val() !== undefined) {
        $('#section-custom_colour_hidden').show();
    }

});
</script>

它不起作用。

Answer 1

尝试使用,.is(':checked')来检查复选框是否被选中

jQuery(document).ready(function($){
   if($('#is_custom_colour').is(':checked')){
      $('#section-custom_colour_hidden').show();
    }
});


<form id="form1" name="form1" method="post" action="">
    <label>
      <input name="checkbox" type="checkbox" id="is_custom_colour" value="checkbox" checked="checked" />
      Checkbox</label>   
</form>
<div id="section-custom_colour_hidden" style="display:none">HIDDEN AREA</div>