Question

这正在[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>

感谢您抽出宝贵时间。祝你有个美好的一天。

Answer 1

您正在使用jQuery，但未加载它。

在脚本之前添加以下内容：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

它适用于jsfiddle，因为它正在为您添加jQuery脚本，如以下屏幕截图所示

如果您不想使用cdn，可以通过jquery.com获取jquery的本地副本，并将其放在源“js”目录中。

Answer 2

您只包含dropdown.js文件，而不是jquery.js，因此您的浏览器不知道美元符号是什么。您可能在控制台中看到至少一个TypeError。请记住，使用jsfiddle，只需从下拉菜单中选择所需的版本即可，但在项目中，您需要下载最新的jquery版本或通过Content Delivery Network包含它：

选中此项：http://jquery.com/download/并找到更适合您项目的方法

Javascript函数在JSFiddle中工作，但是当我在本地页面上复制它时无效

2 个答案: