Question

我有以下清单和任务结构

enter image description here

现在我想要任何人检查一个任务我想确保检查清单也被检查。当有人取消选中核对清单时，所有任务都应该取消选中。

<!-- Checklist -->
              <div class="checklist">
                <div class="media">
                  <div class="pull-left checklist-checkbox">
                    <input class="checklist-input" name="checklist" type="checkbox" value="">
                  </div>
                  <div class="media-body task-list">
                    <h4 class="media-heading">This is a CheckList</h4>
                    <div class="media tasks">
                      <div class="pull-left task-checkbox">
                        <input class="task-input" name="task" type="checkbox" value="">
                      </div>
                      <div class="media-body">Search for entertainers that perform the types of shows that are suitable for your function.</div>
                    </div>
                    <div class="media tasks">
                      <div class="pull-left task-checkbox">
                        <input class="task-input" name="task" type="checkbox" value="">
                      </div>
                      <div class="media-body"> Book your venue.</div>
                    </div>
                    <div class="media tasks">
                      <div class="pull-left task-checkbox">
                        <input class="task-input" name="task" type="checkbox" value="">
                      </div>
                      <div class="media-body"> Search for a caterer that is suitable for your function. <span class="label label-default">Lalu - June 23rd, 2014</span></div>
                    </div>
                    <div class="media tasks">
                      <div class="pull-left task-checkbox">
                        <input class="task-input" name="task" type="checkbox" value="">
                      </div>
                      <div class="media-body"> Hold a training session for all attending staff and brief them on all activities and expectations for the day of the event.</div>
                    </div>
                    <div class="media tasks">
                      <div class="pull-left task-checkbox">
                        <input class="task-input" name="task" type="checkbox" value="">
                      </div>
                      <div class="media-body"> Appoint an adequate number of staff as greeters to welcome guests and orient them with the event activities and venue.</div>
                    </div>
                    <div class="add-task"><a href="#">Add Task</a></div>
                    <div class="form-add-task">
                      <form action="addtask.php" method="post">
                        <input type="text" class="form-control task-input">
                        <input class="btn btn-sm btn-default" name="submit-task" type="submit" value="Add Task">
                      </form>
                    </div>
                  </div>
                </div>
              </div>
              <div class="checklist">
                <div class="media">
                  <div class="pull-left checklist-checkbox">
                    <input class="checklist-input" name="checklist" type="checkbox" value="">
                  </div>
                  <div class="media-body task-list">
                    <h4 class="media-heading">This is a CheckList</h4>
                    <div class="media tasks">
                      <div class="pull-left task-checkbox">
                        <input class="task-input" name="task" type="checkbox" value="">
                      </div>
                      <div class="media-body">Search for entertainers that perform the types of shows that are suitable for your function.</div>
                    </div>
                    <div class="media tasks">
                      <div class="pull-left task-checkbox">
                        <input class="task-input" name="task" type="checkbox" value="">
                      </div>
                      <div class="media-body"> Book your venue.</div>
                    </div>
                    <div class="media tasks">
                      <div class="pull-left task-checkbox">
                        <input class="task-input" name="task" type="checkbox" value="">
                      </div>
                      <div class="media-body"> Search for a caterer that is suitable for your function. <span class="label label-default">Lalu - June 23rd, 2014</span></div>
                    </div>
                    <div class="media tasks">
                      <div class="pull-left task-checkbox">
                        <input class="task-input" name="task" type="checkbox" value="">
                      </div>
                      <div class="media-body"> Hold a training session for all attending staff and brief them on all activities and expectations for the day of the event.</div>
                    </div>
                    <div class="media tasks">
                      <div class="pull-left task-checkbox">
                        <input class="task-input" name="task" type="checkbox" value="">
                      </div>
                      <div class="media-body"> Appoint an adequate number of staff as greeters to welcome guests and orient them with the event activities and venue.</div>
                    </div>
                    <div class="add-task"><a href="#">Add Task</a></div>
                    <div class="form-add-task">
                      <form action="addtask.php" method="post">
                        <input type="text" class="form-control task-input">
                        <input class="btn btn-sm btn-default" name="submit-task" type="submit" value="Add Task">
                      </form>
                    </div>
                  </div>
                </div>
              </div>
              <!-- / Checklist -->

jQuery代码：

$('input.checklist-input').on('change',function(){
  $(this).parent().siblings('.task-list').find('input.task-input').prop('checked',$(this).prop('checked'));
})

Answer 1

与Caio Vianna相似，只是一个不同的if，并瞄准正确的列表。如果不再检查任务，还添加了核对表的取消选中。我确定你可以优化选择器，但无论如何应该是有帮助的

$('input.task-input').on('change', function () {
    if ($(this).prop('checked') === true) {
        $(this).closest('div.tasks').parent().prev().find('input.checklist-input').prop('checked', true);
    } else {
        var checked = $(this).closest('div.task-list').find('input.task-input:checked').length;
        if (checked === 0) {
            $(this).closest('div.tasks').parent().prev().find('input.checklist-input').prop('checked', false);
        }
    }
})

Answer 2

您的代码将检查所有（或不是），因为主要核对清单被切换（唉，当您检查它时，它会检查内部的所有内容，反之亦然）。

你想先测试一下......

$('input.checklist-input').on('change',function(){
    if (!$(this).prop('checked'))
       $(this).parent().siblings('.task-list').find('input.task-input').prop('checked',false);
})

这只会是UNCHECK，因为它只在您取消选中主核对清单时才会运行。至于其余的

$(input.task-input').on('change',function() {
    if ($(this).prop('checked'))
        $('input.checklist-input').prop('checked',true);
})

只有在检查了兄弟姐妹时才会检查主核对清单

注意：我的jquery选择器技能是生锈的，所以我可能会在那里犯一些错误，但我猜这个东西的逻辑是明确的= p

Answer 3

我相信你缺乏执行以下逻辑的功能：

收听.task-input
确定分组的.task-input元素的已检查项目的长度是否超过0
- 如果超过零，请检查群组自己的.checklist-input
- 如果没有，请取消选中群组自己的.checklist-input

这是缺失的功能：

$('input.task-input').on('change', function() {
    var tasks = $(this).closest('.task-list').find('input.task-input:checked').length;
    $(this).closest('.checklist').find('input.checklist-input').prop('checked',tasks);
});

概念验证小提琴：http://jsfiddle.net/teddyrised/1cy47tga/1/

Answer 4

你应该分两步控制：

对于主要关卡清单按钮：

$('body').on('change', '.checklist-input', function () {
    var checked = $(this).prop('checked');
    $(this).closest('.checklist').find('.task-input:checkbox').prop('checked', checked);
});

对于第二级复选框：

$('body').on('change', '.task-input:checkbox', function () {
    var checkedArray = [];
    var $checkboxes = $(this).closest('.checklist').find('.task-input:checkbox');

    $checkboxes.each(function () {
        var checked = $(this).prop('checked');
        if (checked) {
            checkedArray.push(checked);
        }
    });

    var totalChecked = false;
    if (checkedArray.length == $checkboxes.length) {
        totalChecked = true;
    }

    $(this).closest('.checklist').find('.checklist-input').prop('checked', totalChecked);
});

JSFiddle Demo

jQuery选中复选框 - 全选

4 个答案: