jQuery選擇復選框-全選

Question

我有以下清單和任務結構

現在，我想要任何人檢查一項任務，以確保檢查清單也得到檢查。 當某人取消選中核對表時，所有任務均應取消選中。

<!-- 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相似，只是如果不同，並定位適當的列表。 如果不再有已檢查的任務，還添加了取消檢查清單的功能。 我敢肯定，盡管您可以優化選擇器，但仍然應該會有所幫助

$('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);
})

這只會取消檢查，因為只有在未選中主檢查清單的情況下它才會運行。 至於其余的

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

僅當您檢查了兄弟姐妹時，才會檢查主清單

注意：我的jquery選擇器技能很生疏，所以我可能在那兒犯了一些錯誤，但是我想事情的邏輯很清楚= p

Answer 3

我相信您缺少執行以下邏輯的功能：

1. 監聽.task-input上的change事件
2. 確定分組的.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

您應該分兩步進行控制：

1. 對於主級別清單按鈕：

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

2. 對於第二級復選框：

    $('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演示 。