正在处理 [ http://jsfiddle.net/4zxgshpq/ ](我已编辑)但是当我复制整个代码并在我的页面上运行它时不起作用。我已经搜索了诸如在末尾移动 javascript 或在开头添加 $(function(){ 之类的答案，但它仍然不起作用，我找不到任何解决方案。有人可以帮忙吗。谢谢。
这是我的脚本
$(function(){
$("#Units").on("change", function() {
if ($(this).val() == "Marketing") {
$('input:checkbox').removeAttr('checked');
$(':checkbox:not(:checked)').prop('disabled', false);
$(":checkbox[name='4[]']").change(function(){
if ($(":checkbox[name='4[]']:checked").length == 1){
$(':checkbox:not(:checked)').prop('disabled', true);
}else{
$(':checkbox:not(:checked)').prop('disabled', false);
}
});
}
if ($(this).val() == "Finance") {
$('input:checkbox').removeAttr('checked');
$(':checkbox:not(:checked)').prop('disabled', false);
$(":checkbox[name='4[]']").change(function(){
if ($(":checkbox[name='4[]']:checked").length == 2){
$(':checkbox:not(:checked)').prop('disabled', true);
}else{
$(':checkbox:not(:checked)').prop('disabled', false);
}
});
}
if ($(this).val() == "Operations") {
$('input:checkbox').removeAttr('checked');
$(':checkbox:not(:checked)').prop('disabled', false);
$(":checkbox[name='4[]']").change(function(){
if ($(":checkbox[name='4[]']:checked").length == 3){
$(':checkbox:not(:checked)').prop('disabled', true);
}else{
$(':checkbox:not(:checked)').prop('disabled', false);
}
});
}
$("p").click(function(){
$('input:checkbox').removeAttr('checked');
$(':checkbox:not(:checked)').prop('disabled', false);
});
}).trigger('change');
});
-- 虽然我的索引页面看起来像这样
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Checkbox inside a Dropdown based on another Dropdown Option Menu</title>
<script type="text/javascript" language="javascript" src="js/jquery.dropdown.js"></script>
</head>
<body>
<style>
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px gold solid;
}
#checkboxes label {
display: flex;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
</style>
<select id="Units">
<option value="Marketing"> Marketing </option>
<option value="Finance"> Finance </option>
<option value="Operations"> Operations </option>
</select>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<p style = "cursor:pointer">
Uncheck All</p>
<label for="one">
<input type="checkbox" id = "1" class="dissable" name="4[]" onclick="check();" value="1" /> chbx1</label>
<label for="two">
<input type="checkbox" id = "2" class="dissable" name="4[]" onclick="check();" value="2" /> chbx2</label>
<label for="three">
<input type="checkbox" id = "3" class="dissable" name="4[]" onclick="check();" value="3" /> chbx3</label>
<label for="four">
<input type="checkbox" id = "4" class="dissable" name="4[]" onclick="check();" value="4" /> chbx4</label>
<label for="five">
<input type="checkbox" id = "5" class="dissable" name="4[]" onclick="check();" value="5" /> chbx5</label>
<label for="six">
<input type="checkbox" id = "6" class="dissable" name="4[]" onclick="check();" value="6" /> chbx6</label>
</div>
</div>
<script type="text/javascript">
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
</script>
</body>
</html>
Thanks for having time for this. Have a good day to you .
最佳答案
您正在使用 jQuery，但未加载它。
在脚本之前添加以下内容:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
它适用于 jsfiddle，因为它正在为您添加 jQuery 脚本，如下面的屏幕截图所示
如果您不想使用cdn，您可以通过jquery.com获取jquery的本地副本并将其放入源“js”目录中。
关于Javascript 函数在 JSFiddle 中工作，但当我将其复制到本地页面时不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40417401/