Javascript html问题模板复选框_Javascript_Html_Css

Javascript html问题模板复选框

javascript html css

Javascript html问题模板复选框,javascript,html,css,Javascript,Html,Css,你好，我需要有一个不确定的复选框，当我点击一个复选框时，这个复选框下的复选框必须被自动选中我不知道这段代码有什么问题，这个属性不起作用。我认为问题在于JS代码 <html> <style> body { padding: 20px; } ul { list-style: none; margin: 5px 20px; } li {

你好，我需要有一个不确定的复选框，当我点击一个复选框时，这个复选框下的复选框必须被自动选中

我不知道这段代码有什么问题，这个属性不起作用。我认为问题在于JS代码

    <html>

     <style>
      body {
      padding: 20px;
           }
      ul { 
      list-style: none;
      margin: 5px 20px;
         }
      li {
      margin: 10px 0;
         }
     </style>

     <script  language="Javascript">
      $('input[type="checkbox"]').change(function(e) {

      var checked = $(this).prop("checked"),
      container = $(this).parent(),
      siblings = container.siblings();

      container.find('input[type="checkbox"]').prop({
      indeterminate: false,
      checked: checked   });


      function checkSiblings(el) {

       var parent = el.parent().parent(),
       all = true;

       el.siblings().each(function() {
       return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked); });


if (all && checked) {

  parent.children('input[type="checkbox"]').prop({
    indeterminate: false,
    checked: checked  });


  checkSiblings(parent);}

else if (all && !checked) {

  parent.children('input[type="checkbox"]').prop("checked", checked);
  parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
  checkSiblings(parent);}

else {

  el.parents("li").children('input[type="checkbox"]').prop({
    indeterminate: true,
    checked: false });}}


 checkSiblings(container);
 });
</script>
<body>
<h1>Indeterminate Checkboxes</h1>

<ul>
 <li>
 <input type="checkbox" name="tall" id="tall">
 <label for="tall">Tall Things</label>

<ul>
  <li>
    <input type="checkbox" name="tall-1" id="tall-1">
    <label for="tall-1">Buildings</label>
  </li>
  <li>
    <input type="checkbox" name="tall-2" id="tall-2">
    <label for="tall-2">Giants</label>

    <ul>
      <li>
        <input type="checkbox" name="tall-2-1" id="tall-2-1">
        <label for="tall-2-1">Andre</label>
      </li>
      <li>
        <input type="checkbox" name="tall-2-2" id="tall-2-2">
        <label for="tall-2-2">Paul Bunyan</label>
      </li>
    </ul>
  </li>
  <li>
    <input type="checkbox" name="tall-3" id="tall-3">
    <label for="tall-3">Two sandwiches</label>
  </li>
</ul>
</li>
<li>
<input type="checkbox" name="short" id="short">
<label for="short">Short Things</label>

   <ul>
     <li>
    <input type="checkbox" name="short-1" id="short-1">
    <label for="short-1">Smurfs</label>
     </li>
     <li>
    <input type="checkbox" name="short-2" id="short-2">
    <label for="short-2">Mushrooms</label>
     </li>
     <li>
       <input type="checkbox" name="short-3" id="short-3">
       <label for="short-3">One Sandwich</label>
     </li>
    </ul>
   </li>
  </ul>
 </body>
</html>


身体{
填充：20px；
}
ul{
列表样式：无；
利润率：5px20px；
}
李{
利润率：10px0；
}
$（'input[type=“checkbox”]”）。更改（函数（e）{
var checked=$（this）.prop（“checked”），
容器=$（this）.parent（），
兄弟姐妹=容器。兄弟姐妹（）；
container.find（'input[type=“checkbox”]”）.prop({
不确定：错误，
选中：选中}）；
功能检查（el）{
var parent=el.parent（）.parent（），
全部=正确；
el.sides（）.each（函数（））{
返回全部=（$（this）.children（'input[type=“checkbox”]”）.prop（“checked”）===checked）；}）；
如果（全部选中（&D）{
parent.children（'input[type=“checkbox”]”）.prop({
不确定：错误，
选中：选中}）；
检查兄弟姐妹（父）；}
else if（全部&！选中）{
parent.children（'input[type=“checkbox”]”）.prop（“checked”，checked）；
parent.children（'input[type=“checkbox”]'））.prop（“不确定”，“parent.find”（'input[type=“checkbox”]：checked'））.length>0）；
检查兄弟姐妹（父）；}
否则{
el.parents（“li”）.children（'input[type=“checkbox”]”）.prop({
不确定：对，
选中：false}）；}
支票（集装箱）；
});
不确定复选框


高大的东西


建筑


巨人


安德烈


保罗班扬




两个三明治




短小的东西


蓝精灵


蘑菇


一个三明治

表达式类似于代码中的

$（？）

，表示jQuery选择器

在本例中，使用元素选择器


身体{
填充：20px；
}
保险商实验室{
列表样式：无；
利润率：5px20px；
}
李{
利润率：10px0；
}
$（'input[type=“checkbox”]”）。更改（函数（e）{
var checked=$（this）.prop（“checked”），
容器=$（this）.parent（），
兄弟姐妹=容器。兄弟姐妹（）；
container.find（'input[type=“checkbox”]”）.prop({
不确定：错误，
勾选：勾选
});
功能检查（el）{
var parent=el.parent（）.parent（），
全部=正确；
el.sides（）。每个（函数（）{
全部归还=
（$（this）.children（'input[type=“checkbox”]）.prop（“checked”）==checked）；
});
如果（全部选中（&D）{
parent.children（'input[type=“checkbox”]”）.prop({
不确定：错误，
勾选：勾选
});
检查兄弟姐妹（父母）；
}
else if（全部&！选中）{
parent.children（'input[type=“checkbox”]”）.prop（“checked”，checked）；
parent.children（'input[type=“checkbox”]'））.prop（“不确定”，“parent.find”（'input[type=“checkbox”]：checked'））.length>0）；
检查兄弟姐妹（父母）；
}
否则{
el.parents（“li”）.children（'input[type=“checkbox”]”）.prop({
不确定：对，
勾选：假
});
}
}
支票（集装箱）；
});
不确定复选框


高大的东西


建筑


巨人


安德烈


保罗班扬




两个三明治




短小的东西


蓝精灵


蘑菇


一个三明治

工作正常。只需添加Jquery依赖项

<script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>

嗨！我已经检查了您的代码，它工作正常：）请尝试更改您的

　→　 <代码>我想← 这是正确的写作方法我更新我的答案。再次检查谢谢但它不起作用你在记事本文件中使用它吗？？我不知道我该如何处理这种依赖关系的问题？我是一个初学者。。你能告诉我代码中的每一行应该写在哪里吗。。如何将其与

<script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>