代码之家  ›  专栏  ›  技术社区  ›  HPWD

jquery select all复选框;取消选中child复选框时取消选择parent

jquery-traversing jquery
  •  0
  • HPWD  · 技术社区  · 6 年前

    我创造了一个 JSFiddle .当查看它时,选中一个父级,您将看到子级被选中。理想情况下,当取消选择一个孩子时,我希望家长不选中,这可能是一个或两个家长,这取决于取消选择的内容(家长将作为下面孩子的全选)。

    由于筑巢,我不确定最好的方法来完成。 

    $("input[type='checkbox']").change(function() {
  $(this).siblings()
    .find("input[type='checkbox']")
    .prop('checked', this.checked);
});
    #listContainer {
  /*width:400px;*/
  width: 100%;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.listItem {
  margin: 5px 0px 5px 15px;
  border: 0px;
  /*background-color: #cecece;*/
  padding: 1px;
  /*cursor: move;*/
}

.phaseItem {
  /*background: #ccc;*/
  min-height: 30px;
}

.phaseTitle {
  /*  background:#abc;
  padding:10px;*/
}

.weekItem {
  /*margin: 0px 0px 0px 10px;*/
  min-height: 30px;
  /*padding: 10px;*/
}

.weekTitle {
  /*margin: 0px 0px 0px 10px;
    border: 1px solid #999;
    background-color: #fff;
    padding: 5px;*/
  /*cursor: pointer;*/
}

.dayItem {
  /*  background: #fff;
  padding:10px;*/
  min-height: 30px;
  /*margin: 0px 0px 0px 10px;*/
}

.dayTitle {
  /*    margin: 0px 0px 0px 10px;
    border: 1px solid #999;
    background-color: #fff;
    padding: 5px;*/
  /*cursor: pointer;*/
}

.itemPlaceholder {
  border: 1px dashed #cecece;
  font-weight: bold;
  font-size: 45px;
  background-color: #fce77e;
  min-height: 30px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="listContainer">
  <ul class="srtable ui-sortable">
    <li class="listItem phaseItem ui-sortable-handle ui-sortable">

      <div class="listItem phaseTitle ui-sortable-handle ui-sortable">
        <i class="glyphicon weekToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="phase" id="phase_cb_1" class="ui-sortable-handle"> Phase 1
        <div class="listItem weekItem ui-sortable-handle ui-sortable" style="">

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_1" class="ui-sortable-handle"> Week 1
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_2" class="ui-sortable-handle"> Week 2
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_3" class="ui-sortable-handle"> Week 3
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

        </div>
      </div>

      <div class="listItem phaseTitle ui-sortable-handle ui-sortable">
        <i class="glyphicon weekToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="phase" id="phase_cb_2" class="ui-sortable-handle"> Phase 2
        <div class="listItem weekItem ui-sortable-handle ui-sortable" style="">

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_1" class="ui-sortable-handle"> Week 1
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_2" class="ui-sortable-handle"> Week 2
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_3" class="ui-sortable-handle"> Week 3
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_4" class="ui-sortable-handle"> Week 4
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

        </div>
      </div>

      <div class="listItem phaseTitle ui-sortable-handle ui-sortable">
        <i class="glyphicon glyphicon-chevron-up weekToggle ui-sortable-handle"></i> <input type="checkbox" name="phase" id="phase_cb_3" class="ui-sortable-handle"> Phase 3
        <div class="listItem weekItem hide ui-sortable-handle ui-sortable" style="">

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_1" class="ui-sortable-handle"> Week 1
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_5" class="ui-sortable-handle"> Day 5</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_2" class="ui-sortable-handle"> Week 2
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

            </div>
          </div>

        </div>
      </div>

      <div class="listItem phaseTitle ui-sortable-handle ui-sortable">
        <i class="glyphicon glyphicon-chevron-up weekToggle ui-sortable-handle"></i> <input type="checkbox" name="phase" id="phase_cb_4" class="ui-sortable-handle"> Phase 4
        <div class="listItem weekItem hide ui-sortable-handle ui-sortable" style="">

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_1" class="ui-sortable-handle"> Week 1
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_5" class="ui-sortable-handle"> Day 5</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_2" class="ui-sortable-handle"> Week 2
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_3" class="ui-sortable-handle"> Week 3
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

        </div>
      </div>

      <div class="listItem phaseTitle ui-sortable-handle ui-sortable">
        <i class="glyphicon glyphicon-chevron-up weekToggle ui-sortable-handle"></i> <input type="checkbox" name="phase" id="phase_cb_5" class="ui-sortable-handle"> Phase 5
        <div class="listItem weekItem hide ui-sortable-handle ui-sortable" style="">

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_1" class="ui-sortable-handle"> Week 1
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_2" class="ui-sortable-handle"> Week 2
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_3" class="ui-sortable-handle"> Week 3
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_4" class="ui-sortable-handle"> Week 4
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_5" class="ui-sortable-handle"> Week 5
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_5" class="ui-sortable-handle"> Day 5</div>

            </div>
          </div>

        </div>
      </div>

    </li>
  </ul>
</div>

    我已经包含了下面的JS代码,但是要获得完整的图片,请访问JSfiddle。 

    $("input[type='checkbox']").change(function() {
  $(this).siblings()
    .find("input[type='checkbox']")
    .prop('checked', this.checked);
});

    我也尝试过,但它也取消选中所有相同级别的项目: 

    $("input[type='checkbox']").change(function() {
  if ($(this).is(':checked')) {
    $(this).siblings()
      .find("input[type='checkbox']")
      .prop('checked', this.checked);
  } else {
    $(this).parents()
      .find("input[type='checkbox']")
      .prop('checked', this.checked);
  }
});
    2 回复  |  直到 6 年前
        1
  •  0
  •   Hikarunomemory Bhavana    6 年前

    编辑:根据注释,使用递归函数可以解决问题。 

    let checkbox = "input[type='checkbox']";

$(checkbox).change(function() {
  let $this = $(this);
  CheckChildren($this);
  CheckParents($this);
});

let CheckChildren = function($this) {
  $this.siblings()
    .find(checkbox)
    .prop('checked', $this.is(":checked"));
}

let CheckParents = function($this) {
  let $parent = $this.parent().parent();
  if($parent.length == 0) return;
  // get the number of all checkboxes that $parent contains
  // get the number of checked checkboxes that $parent contains
  // if the two numbers equals, this checkbox($parent.siblings(checkbox)) should be checked.
  let checked = $parent.find(checkbox).length
            === $parent.find(`${checkbox}:checked`).length;
            // this is "template strings"
            // `${checkbox}:checked` = checkbox + ":checked"
  CheckParents($parent.siblings(checkbox).prop("checked", checked));
}
    #listContainer {
  /*width:400px;*/
  width: 100%;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.listItem {
  margin: 5px 0px 5px 15px;
  border: 0px;
  /*background-color: #cecece;*/
  padding: 1px;
  /*cursor: move;*/
}

.phaseItem {
  /*background: #ccc;*/
  min-height: 30px;
}

.phaseTitle {
  /*  background:#abc;
  padding:10px;*/
}

.weekItem {
  /*margin: 0px 0px 0px 10px;*/
  min-height: 30px;
  /*padding: 10px;*/
}

.weekTitle {
  /*margin: 0px 0px 0px 10px;
    border: 1px solid #999;
    background-color: #fff;
    padding: 5px;*/
  /*cursor: pointer;*/
}

.dayItem {
  /*  background: #fff;
  padding:10px;*/
  min-height: 30px;
  /*margin: 0px 0px 0px 10px;*/
}

.dayTitle {
  /*    margin: 0px 0px 0px 10px;
    border: 1px solid #999;
    background-color: #fff;
    padding: 5px;*/
  /*cursor: pointer;*/
}

.itemPlaceholder {
  border: 1px dashed #cecece;
  font-weight: bold;
  font-size: 45px;
  background-color: #fce77e;
  min-height: 30px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="listContainer">
  <ul class="srtable ui-sortable">
    <li class="listItem phaseItem ui-sortable-handle ui-sortable">

      <div class="listItem phaseTitle ui-sortable-handle ui-sortable">
        <i class="glyphicon weekToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="phase" id="phase_cb_1" class="ui-sortable-handle"> Phase 1
        <div class="listItem weekItem ui-sortable-handle ui-sortable" style="">

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_1" class="ui-sortable-handle"> Week 1
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_2" class="ui-sortable-handle"> Week 2
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_3" class="ui-sortable-handle"> Week 3
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

        </div>
      </div>

      <div class="listItem phaseTitle ui-sortable-handle ui-sortable">
        <i class="glyphicon weekToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="phase" id="phase_cb_2" class="ui-sortable-handle"> Phase 2
        <div class="listItem weekItem ui-sortable-handle ui-sortable" style="">

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_1" class="ui-sortable-handle"> Week 1
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_2" class="ui-sortable-handle"> Week 2
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_3" class="ui-sortable-handle"> Week 3
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_4" class="ui-sortable-handle"> Week 4
            <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

        </div>
      </div>

      <div class="listItem phaseTitle ui-sortable-handle ui-sortable">
        <i class="glyphicon glyphicon-chevron-up weekToggle ui-sortable-handle"></i> <input type="checkbox" name="phase" id="phase_cb_3" class="ui-sortable-handle"> Phase 3
        <div class="listItem weekItem hide ui-sortable-handle ui-sortable" style="">

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_1" class="ui-sortable-handle"> Week 1
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_5" class="ui-sortable-handle"> Day 5</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_2" class="ui-sortable-handle"> Week 2
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

            </div>
          </div>

        </div>
      </div>

      <div class="listItem phaseTitle ui-sortable-handle ui-sortable">
        <i class="glyphicon glyphicon-chevron-up weekToggle ui-sortable-handle"></i> <input type="checkbox" name="phase" id="phase_cb_4" class="ui-sortable-handle"> Phase 4
        <div class="listItem weekItem hide ui-sortable-handle ui-sortable" style="">

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_1" class="ui-sortable-handle"> Week 1
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_5" class="ui-sortable-handle"> Day 5</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_2" class="ui-sortable-handle"> Week 2
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_3" class="ui-sortable-handle"> Week 3
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

        </div>
      </div>

      <div class="listItem phaseTitle ui-sortable-handle ui-sortable">
        <i class="glyphicon glyphicon-chevron-up weekToggle ui-sortable-handle"></i> <input type="checkbox" name="phase" id="phase_cb_5" class="ui-sortable-handle"> Phase 5
        <div class="listItem weekItem hide ui-sortable-handle ui-sortable" style="">

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_1" class="ui-sortable-handle"> Week 1
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_2" class="ui-sortable-handle"> Week 2
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_3" class="ui-sortable-handle"> Week 3
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_4" class="ui-sortable-handle"> Week 4
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

            </div>
          </div>

          <div class="listItem weekTitle ui-sortable-handle ui-sortable">
            <i class="glyphicon glyphicon-chevron-up dayToggle ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_5" class="ui-sortable-handle"> Week 5
            <div class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>

              <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_5" class="ui-sortable-handle"> Day 5</div>

            </div>
          </div>

        </div>
      </div>

    </li>
  </ul>
</div>
        2
  •  0
  •   Watercayman    6 年前

    我发现最简单的方法就是向父级添加一个ID(我看到您已经有了这个ID),然后通过一个数据属性让孩子知道他们的父级是谁。它保持简单。但是,如果您在该级别的代码上没有可见性,那么可能对您不可行。

    HTML类似于: 

    <input type="checkbox" name="phase" id="phase_cb_1" class='one'> Phase 1
<input type="checkbox" name="week" id="week_cb_1" class='one'> Week 1
<input type="checkbox" name="day" id="day_cb_1" data-parent='week_cb_1' data-parents-class='one'> Day 1

    然后jquery只会为您已经拥有的内容添加一点内容: 

    $("input[type='checkbox']").change(function() {
if ($(this).is(':checked')) {
   $(this).siblings()
     .find("input[type='checkbox']")
     .prop('checked', this.checked);
  } else {
     var parentId = $(this).data('parent');
     $("#"+parentId).prop('checked', this.checked);
     // Or if you want all parents:
     var parentsClasses = $(this).data('parents-classes');
     $("."+parentsClasses).prop('checked', this.checked);
  }
});

    这将取消选中单亲。如果您想取消选中多个父项,可以应用相同的逻辑,但使用类而不是ID…或者两者的结合。

    推荐文章
    Newbie_Coder  ·  如何使用Jquery无画布裁剪框架
    1 年前
    usman610  ·  Javascript代码在点击回车键和点击按钮时删除行
    1 年前
    NovoMannen  ·  导航中的下拉菜单在内容后面重叠
    1 年前
    Carly  ·  在页面加载时滑入div,然后单击以滑入和滑出(jQuery)
    1 年前
    Community wiki  ·  jquery弹出窗口不会用按键关闭,但会点击
    1 年前
    Community wiki  ·  Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?
    1 年前
    Community wiki  ·  无法从jquery文档调用函数
    1 年前
    marzouk najib  ·  Uncaught ReferenceError:未定义FullCalendar
    2 年前
    Pepe  ·  检查“data”属性是否包含输入值的一部分(jQuery)
    2 年前
    laurence keith albano  ·  如何使用Jquery在父类内添加子父类
    2 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号