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

Answer 2

这里有一些事情：

1 - 如果您准备好文档，那就更好了，因为它等待所有元素都被加载。

2 - 你应该在页面加载时隐藏元素$（“＃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');
})

复选框隐藏Div未选中

2 个答案: