Question

我正在尝试从后端显示一个表单字段，具体取决于是否选择了表单中较早的复选框字段。

但是下面似乎不起作用？

$(document).ready(function () {
    var $move_in_date = $('#div_id_address-move_in_date')

    $move_in_date.hide();

    if ($('#id_address-same_address:checked')){
        $move_in_date.show();
});

HTML

<div class="controls col--offset-0 "> <div id="div_id_address-same_address" class="checkbox"> <label for="id_address-same_address" class=""> <input class="checkboxinput" id="id_address-same_address" name="address-same_address" type="checkbox">
                    Have you lived at the property for 3 years?
                </label> </div> </div>

<div id="div_id_address-move_in_date" class="form-group" style="display: none;"> <label for="id_address-move_in_date" class="control-label sr-only">
                Move in date
            </label> <div class="controls "> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> <input class="dateinput form-control" id="id_address-move_in_date" name="address-move_in_date" placeholder="What date did you move in to your current address" type="text"> </div> </div> </div>

现在正在使用它：

$(document).ready(function () {
 $("#id_address-same_address").change(function () {
        toggleFields();
    });

    $('#div_id_address-move_in_date').hide();
});


function toggleFields() {
    $('#div_id_address-move_in_date').toggle($('#div_id_address-same_address').prop('checked'));
}

Answer 1

您可以使用toggle()来简化这一点。这和toggleClass()允许您传递布尔值并将可见性状态（或添加/删除类）设置为它的值。

由于读取checked属性会返回bool，因此您可以直接在切换调用中使用它。不需要分支声明。

*script

工作示例：

https://jsfiddle.net/frkxk3d7/

Answer 2

检查此代码

verifyValue

这应该可以帮到你

Answer 3

在js语句结束时缺少分号; 并检查复选框状态使用prop（）方法。

$(document).ready(function () {
   var $move_in_date = $('#div_id_address-move_in_date');
   $move_in_date.hide();

   if ($('#id_address-same_address').prop('checked')){
       $move_in_date.show();
   }
});

无法显示隐藏字段JQuery

3 个答案: