Question

您好我需要一个不确定的复选框，当我点击一个复选框时，必须自动选中此复选框下的复选框。

我不知道这段代码有什么问题，这个属性不起作用。我认为问题出在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>

Answer 1

代码中的$(???)表达式，意思是jQuery选择器。

在这种情况下，您使用元素选择器。 https://api.jquery.com/element-selector/

<!DOCTYPE html>
<html>
<style>
    body {
        padding: 20px;
    }

    ul {
        list-style: none;
        margin: 5px 20px;
    }

    li {
        margin: 10px 0;
    }
</style>

<!-- ***** ADDED Start ***** -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
        crossorigin="anonymous"></script>
<!-- ***** ADDED End ***** -->

<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>

Answer 2

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

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

html问题模板复选框

2 个答案: