Javascript 在mvc5中单击复选框使下拉列表可见

我有一个复选框。在此复选框上单击“我想使下拉列表可见”。代码如下

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

我想注册成为学校管理员

@Html.DropDownList（“学校”），新列表
{
新建SelectListItem{Text=“请选择”，Value=“-1”}，
新建SelectListItem{Text=“School1”，Value=“1”}，
新建SelectListItem{Text=“School2”，Value=“0”}
})

上面的脚本如下

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

$（文档）.ready（函数（）{
如果（$（'.schooladmin'）是（“：选中”））{
//显示隐藏的div
$（'school'）。show（“fast”）；
}否则{
//否则，把它藏起来
$（'school'）。隐藏（“快速”）；
}
$（'.schooladmin'）。单击（函数（）{
//如果检查
如果（$（'.schooladmin'）是（“：选中”））{
//显示隐藏的div
$（'school'）。show（“fast”）；
}否则{
//否则，将其隐藏并重置值
$（'school'）。隐藏（“快速”）；
$（'学校'）.val（''）；
}
});
});

---

有人来帮我吗…

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

首先，

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

试试这个

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

       }else{

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

---

如果（$（'.schooladmin'）{…

您没有类名为schooladmin的元素。我想您的意思是

$（'#schooladmin'））

@StephenMuecke我按照你提到的做了，但更改仍然没有生效看看shuanakde belowi的演示小提琴按照你提到的做了，但更改没有生效。我应该在项目中包含哪些js文件？使用最新的jQuery文件版本。检查控制台是否有错误。我按照你提到的做了，但更改没有生效你检查了我的提琴演示吗？答案中提到了！@Dhaval是的。我复制了同样的东西，尝试了，但没有用。@SajnaAli它应该能用，按

F12

，然后单击控制台选项卡查看浏览器中的错误，看看它说了什么？@DhavalMarthak是的，它显示的错误引用错误：$未定义