取消选中其中一个复选框后，取消选中“全部选中”复选框

Question

我有这个迷你项目差不多完成了。我的问题是checkall复选框。它可以很好地检查所有复选框，但如果我取消选中我的tbody中的1复选框，则复选框仍然处于被检查状态。

下面是我的代码。

要指出这是我的checkall和uncheckall复选框。也可以在代码片段中找到。

$('#checkAll').click(function(){
    $(':checkbox').prop('checked', this.checked);
});

$('.cb').each(function(index){
    $(this).on("change", function(index) {
        if (!this.checked) {
            $("#checkAll").prop('checked', false);
            return;
        }
    });
})

var tasks = [];
var count = 1000;

$('document').ready(function(){
	
	toggleRemoveAndMarkButtons();

	$('#add').click(function() {
		var desc 	= $.trim($('#list-input').val());

		if (!desc) {
			item.id = "";
			alert("Input a description");
			return;
		}

		var status  = $('#task-status').val();
		item 		= {};

		item.description = desc;
		item.status 	 = status;
		for(i = 0 ; i < tasks.length; i++)  {
			if(tasks[i].description.toUpperCase() == desc.toUpperCase()) {
				alert('Task description is already on the list. Please input new task description!')
				return;
			}
		}
		var id	= count++;
		item.id	= id;
		tasks.push(item);

		var row  = "'<tr id="+ item.id +" class='row'>'";
			row += "<td><input type='checkbox' class='cb' /></td>";
			row += "<td> #" + item.id + "</td>";
			row += "<td>" + item.description.toUpperCase() + "</td>";
			row += "'<td class="+ item.id +">" + item.status + "</td>";
			
		$("#mylist tbody").append(row);


		//clear input field
		$('#list-input').val('');
		$('#list-input').focus();
	});

	//remove list function
	$('#delete').on('click', function() {
        if (confirm("Are you sure to delete selected task(s)?")){
        	$(':checkbox:checked').each(function(){
        		var rowId = $(':checkbox:checked').parents('tr').attr('id');
        		var row   = $('tr#' + rowId);
        		for(i=0; i < tasks.length; i++){
        			if(tasks[i].id == rowId){
        				tasks.splice(i, 1);
        				break;
        			}
        		}
        		row.remove();
        	})
        }
        uncheckAfterActionClick();
        toggleRemoveAndMarkButtons();
    })

    $('#update').on('click', function() {
    	if(confirm("Are you sure to Mark these as COMPLETE?")){
			var taskRow = $("#mylist tbody tr");

			$.each(taskRow, function(i, row) {
		    	if( $(this).find('td').eq(0).find("input").is(":checked") ) {
		        	$(this).find('td').eq(3).text("Complete");
		        	tasks[i].status = "Complete";
		        	$(this).addClass('complete');             
		    	}
			});
			$('tr')
    	}
    	uncheckAfterActionClick();
        toggleRemoveAndMarkButtons();
    })

    //check all
    $('#checkAll').click(function(){
	    $(':checkbox').prop('checked', this.checked);
	});

	$('.cb').each(function(index){
		$(this).on("change", function(index) {
		    if (!this.checked) {
		        $("#checkAll").prop('checked', false);
		        return;
		    }
		});
	})

})


function toggleRemoveAndMarkButtons() {
	var howManyChecked = $('.cb:checked, .checkAll:checked').length;
	var disableButtons = howManyChecked == 0;
	$('#delete, #update').prop('disabled', disableButtons);
}

function uncheckAfterActionClick() {
	$('.cb, #checkAll').prop('checked', false);
    toggleRemoveAndMarkButtons();
}

//container style
$('.container').css({
	"width":"640px",
	"margin":"0 auto", 
	"text-align":"center"
});

$('#list-input').attr({'placeholder':"Input task description"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
		<input id="list-input" />
		<input id="task-status" value="New" type="hidden"/>
		<button id="add">Add To List</button>
		<button id="delete" class="delete" disabled>Remove From List</button>
		<button id="update" disabled>Mark as Complete</button>
	</div>
	<div class="container">
		<h1>Your Task</h1>
		
		<div>
			<table id="mylist">
				<thead>
					<tr>
						<th><input type="checkbox" id="checkAll" onchange="toggleRemoveAndMarkButtons()"/></th>
						<th>Task Number</th>
						<th>Description</th>
						<th>Status</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
	</div>

Answer 1

你的jQuery中有一个拼写错误：

$('this').on("change", function(index) {

您在选择器中搜索'this'字符串，而不是使用jQuery的上下文$(this)。

这条线不起作用：

if (!this.checked) {

相反，请使用.not()选择器：

if ($(this).not(':checked')) {

最后，为每个复选框设置change事件的代码仅在文档就绪时运行 - 所以它试图在.cb元素存在之前绑定它们。这是一个解决方案：

改变这个：

$('.cb').each(function(index) {
    $(this).on("change", function(index) {
        if (!this.checked) {
            $("#checkAll").prop('checked', false);
            return;
        }
    });
})

对此：

$(document).on('change', '.cb', function() {
  if ($(this).not(':checked')) {
    $("#checkAll").prop('checked', false);
  }
});

Answer 2

我使用length：

执行类似的操作

＆＃13;

＆＃13;

$(function () {
  $(".checkAll").click(function () {
    $("input:checkbox").prop("checked", this.checked);
  });
  $("input:checkbox:not(.checkAll)").click(function () {
    $(".checkAll").prop("checked", $("input:checkbox:not(.checkAll):checked").length == 5);
  });
});

＆＃13;

* {
  margin: 0;
  padding: 0;
  list-style: none;
  vertical-align: middle;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<ul>
  <li><label><input type="checkbox" class="checkAll" /> Check All</label></li>
  <li><label><input type="checkbox" /> Check 1</label></li>
  <li><label><input type="checkbox" /> Check 2</label></li>
  <li><label><input type="checkbox" /> Check 3</label></li>
  <li><label><input type="checkbox" /> Check 4</label></li>
  <li><label><input type="checkbox" /> Check 5</label></li>
</ul>

＆＃13;

＆＃13;

＆＃13;