Question

我有一个复选框。在此复选框上单击我想要显示下拉列表。代码如下

<div>
        <input type="checkbox" name="SchoolAdmin" value="True" id="schooladmin">I would like to register as a school admin<br>
    </div>

    <div>
        @Html.DropDownList("school", new List<SelectListItem>
        {
            new SelectListItem{ Text="Please select", Value = "-1" },
            new SelectListItem{ Text="School1", Value = "1" },
            new SelectListItem{ Text="School2", Value = "0" }
        })
    </div>

以上的脚本如下

<script type="text/javascript">
$(document).ready(function() {
    if ($('.schooladmin').is(":checked")) {
        //show the hidden div
        $('#school').show("fast");
    } else {
        //otherwise, hide it
        $('#school').hide("fast");
    }
    $('.schooladmin').click(function () {
        // If checked
        if ($('.schooladmin').is(":checked")) {
            //show the hidden div
            $('#school').show("fast");
        } else {
            //otherwise, hide it and reset value
            $('#school').hide("fast");
            $('#school').val('');
        }
    });
});

有人在那帮助我...

Answer 1

.schooladmin是一个ID，您正在为其应用类选择器，尝试使用ID选择器#进行相同的

所以写

if($('#schooladmin').is(":checked") // add #

而不是

if ($('.schooladmin').is(":checked") // remove .

无处不在

您的代码应该是这样的：

$('#schooladmin').click(function () {
    if (this.checked)
        $('#school').show("fast");
    else
        $('#school').hide("fast");      
});

Demo

Answer 2

首先，$('#schooladmin')而非$('.schooladmin')。 schooladmin 是 ID ，而不是类。

并使用

$('#schooladmin').change(function () {
    if (this.checked) {
        //show the hidden div
        $('#school').show("fast");
    } else {
        //otherwise, hide it and reset value
        $('#school').hide("fast");
        $('#school').val('');
    }
});

<强> Demo Fiddle

Answer 3

试试这个

$(document).ready(function() {
   $('#schooladmin').on("change", function(){
       if($(this).is(":checked")){

       }else{

       }
   }).trigger("change")
});

在复选框中显示下拉列表，单击mvc5

3 个答案:

Demo