javascript - 复选框隐藏 Div 未选中

Question

我有一个带有文本字段的复选框隐藏 div。如果选中复选框，则会显示此文本字段，但如果未选中复选框，则不会显示文本字段。这段代码:

<script type="text/javascript">
    $(function () {

        $("input[name='checkbox1']").click(function () {

            if ($("#checkyes1").is(":checked")) {
                $("#dvcheckbox1").show('lainnya');

            } else {

                $("#dvcheckbox1").hide('lainnya');
            }



        });
    });
</script>

<div style="margin-left: 29%; margin-top: -2%;">
<label for="checkyes1">

<input type="checkbox" id="checkyes1" name="checkbox1" value="lainnya" />
Lainnya
</label>

<div id="dvcheckbox1" style="display: none;">
    <?php echo $form->textField($model,'lainnya'); ?>
</div>
</div>

但是，如果文本字段上有值，如何选中此复选框？并显示文本字段。因为在表单更新中，显示了值但选中了复选框。我希望选中复选框

例如像这样: Click to show example

Answer 1

而是将 change 事件与 .toggle(boolean) 方法一起使用:

// on page load check of the div contains any text
$("#dvcheckbox1").toggle(function(){
   var $v = $(this).find('input').val();
   $("input[name='checkbox1']").prop('checked', $v.trim().length !== 0)
   return $v.trim().length !== 0;
});    

$("input[name='checkbox1']").change(function () {
     $("#dvcheckbox1").toggle(this.checked);
});