复选框隐藏的 div 未选中答案

【问题标题】：Checkbox Hidden Div Unchecked复选框隐藏的 div 未选中
【发布时间】：2017-03-06 07:42:24
【问题描述】：

我有一个带有文本字段的复选框隐藏 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

【问题讨论】：

你的问题不清楚
您的代码似乎运行良好。究竟是什么问题？
在表单更新中，显示文本字段中的值，但未选中复选框。我要选中复选框

标签： javascript jquery html checkbox yii

【解决方案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);
});

【讨论】：

谢谢它的工作。但对不起我的语言。还在学习@Jai

【解决方案2】：

这里有几件事：

1 - 如果你使用 document ready 会更好，因为它会等到所有元素都加载完毕。

2 - 您应该在页面加载时隐藏元素$("#dvcheckbox1").hide('lainnya')。

3 - input:text 中的监听器是个好主意。如果文本框为空，它将启用复选框。

请看下一段代码：

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

【讨论】：