复选框隐藏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>

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

例如，像这样： 单击以显示示例

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

Answer 2

这里有几件事：

1-如果您准备好使用文档，则更好，因为它会等到所有元素都加载完毕。

2-加载页面时，应隐藏element $（“＃dvcheckbox1”）。hide（'lainnya'）。

3-输入：文本中的侦听器是一个好主意。 如果文本框为空，则启用复选框。

请看下一段代码：

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

    <div id="dvcheckbox1">
        <label for="myValuye"/>
        <input type="text" id="myValue" name="myValue" value=""/>
    </div>
</div>

<script>
    $(document).ready(function() {
    $("input[name='checkbox1']").click(function () {
        // Always use some logs to check what line are you reaching.
        console.log("Clicked checkbox!!!");

        if ($("#checkyes1").is(":checked")) {
            $("#dvcheckbox1").show('lainnya');
        } else {
            console.log("Value: " + $("#myValue").val());
            $("#dvcheckbox1").hide("lainnya");
        }
    });

    $("#myValue").bind("change paste keyup", function() {
        if ($(this).val() == "") {
            $("#checkyes1").removeAttr("disabled");
        } else {
            $("#checkyes1").attr("disabled", true);
        }
    });

    // First of all we hide the #dvcheckbox1
    $("#dvcheckbox1").hide('lainnya');
})