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>

选中复选框时调用的函数

1 个答案: