选择全部单击复选框以及全部拒绝

Select All onclick on checkbox along with reject all

本文关键字：全部 拒绝 复选框 单击 选择      更新时间：2023-09-26

谁能帮我勾选复选框全选选项。当我单击复选框时，我需要选中所有复选框。并在我单击拒绝检查时全部拒绝。

我

遇到了一个场景，即我必须从每列中选择一个选项，要么接受，要么拒绝。 用户不应同时选择"访问"和"拒绝"。

并且

页面中有多个表，并且生成一个动态 ID，我正在循环通过 foreach 为每个用户生成这些表。

<table class="table table-bordered">
<thead>
<tr>
<th>name</th>
<th>Agency</th>
<th>score</th>
<th>Origin</th>
<th>Reviewer</th>
<th class="text-center"><label>Accept<input type="checkbox" id="AcceptAll" name="checkbox"></label></th>
<th class="text-center"><label>Reject<input type="checkbox" id="RejectAll" name="checkbox"></label></th>
</tr>
</thead>
<tbody>
<tr>
<td>srara</td>
<td>rfara</td>
<td>1</td>
<td>fafaf</td>
<td>rara</td>
<td class="text-center"><input type="checkbox" class="Accept" name="checkbox" value="value"></td>
<td class="text-center"><input type="checkbox" class="Reject" name="checkbox" value="value"></td>
</tr>
<tr>
<td>srara</td>
<td>rfara</td>
<td>3</td>
<td>fafaf</td>
<td>rara</td>
<td class="text-center"><input type="checkbox" class="Accept" name="checkbox" value="value"></td>
<td class="text-center"><input type="checkbox" class="Reject" name="checkbox" value="value"></td>
</tr>
<tr>
<td>srara</td>
<td>rfara</td>
<td>2</td>
<td>fafaf</td>
<td>rara</td>
<td class="text-center"><input type="checkbox" class="Accept" name="checkbox" value="value"></td>
<td class="text-center"><input type="checkbox" class="Reject" name="checkbox" value="value"></td>
</tr>
</tbody>
</table>

<table class="table table-bordered">
<thead>
<tr>
<th>name</th>
<th>Agency</th>
<th>score</th>
<th>Origin</th>
<th>Reviewer</th>
<th class="text-center"><label>Accept<input type="checkbox" id="AcceptAll" name="checkbox"></label></th>
<th class="text-center"><label>Reject<input type="checkbox" id="RejectAll" name="checkbox"></label></th>
</tr>
</thead>
<tbody>
<tr>
<td>srara</td>
<td>rfara</td>
<td>1</td>
<td>fafaf</td>
<td>rara</td>
<td class="text-center"><input type="checkbox" class="Accept" name="checkbox" value="value"></td>
<td class="text-center"><input type="checkbox" class="Reject" name="checkbox" value="value"></td>
</tr>
<tr>
<td>srara</td>
<td>rfara</td>
<td>3</td>
<td>fafaf</td>
<td>rara</td>
<td class="text-center"><input type="checkbox" class="Accept" name="checkbox" value="value"></td>
<td class="text-center"><input type="checkbox" class="Reject" name="checkbox" value="value"></td>
</tr>
<tr>
<td>srara</td>
<td>rfara</td>
<td>2</td>
<td>fafaf</td>
<td>rara</td>
<td class="text-center"><input type="checkbox" class="Accept" name="checkbox" value="value"></td>
<td class="text-center"><input type="checkbox" class="Reject" name="checkbox" value="value"></td>
</tr>
</tbody>
</table>enter code here

https://jsfiddle.net/iamsrk/7mgcncnk/

始终 确保在整个

文档中提供唯一的 ID

在您的情况下#AcceptAll由于您使用的循环而重复。所以使用类。

代码没问题，用类替换id

。 
<input type="checkbox" id="AcceptAll" name="checkbox">
to
<input type="checkbox" class="AcceptAll" name="checkbox">

在jquery中使用这个 

$(".AcceptAll")

看看这个

$(".AcceptAll").bind("change", function () {
			$(this).closest("table").find(".Reject").prop("checked", false);
            $(this).closest("table").find(".Accept").prop("checked", $(this).prop("checked"));
        });
        $(".RejectAll").bind("change", function () {
        	$(this).closest("table").find(".Accept").prop("checked", false);
            $(this).closest("table").find(".Reject").prop("checked", $(this).prop("checked"));
        });
        $('input[type="checkbox"]').on('change', function () {
            $(this).closest('tr').find('input').not(this).prop('checked', false);
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<table class="table table-bordered">
<thead>
<tr>
<th>name</th>
<th>Agency</th>
<th>score</th>
<th>Origin</th>
<th>Reviewer</th>
<th class="text-center"><label>Accept<input type="checkbox" class="AcceptAll" name="checkbox"></label></th>
<th class="text-center"><label>Reject<input type="checkbox" class="RejectAll" name="checkbox"></label></th>
</tr>
</thead>
<tbody>
<tr>
<td>srara</td>
<td>rfara</td>
<td>1</td>
<td>fafaf</td>
<td>rara</td>
<td class="text-center"><input type="checkbox" class="Accept" name="checkbox" value="value"></td>
<td class="text-center"><input type="checkbox" class="Reject" name="checkbox" value="value"></td>
</tr>
<tr>
<td>srara</td>
<td>rfara</td>
<td>3</td>
<td>fafaf</td>
<td>rara</td>
<td class="text-center"><input type="checkbox" class="Accept" name="checkbox" value="value"></td>
<td class="text-center"><input type="checkbox" class="Reject" name="checkbox" value="value"></td>
</tr>
<tr>
<td>srara</td>
<td>rfara</td>
<td>2</td>
<td>fafaf</td>
<td>rara</td>
<td class="text-center"><input type="checkbox" class="Accept" name="checkbox" value="value"></td>
<td class="text-center"><input type="checkbox" class="Reject" name="checkbox" value="value"></td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead>
<tr>
<th>name</th>
<th>Agency</th>
<th>score</th>
<th>Origin</th>
<th>Reviewer</th>
<th class="text-center"><label>Accept<input type="checkbox" class="AcceptAll" name="checkbox"></label></th>
<th class="text-center"><label>Reject<input type="checkbox" class="RejectAll" name="checkbox"></label></th>
</tr>
</thead>
<tbody>
<tr>
<td>srara</td>
<td>rfara</td>
<td>1</td>
<td>fafaf</td>
<td>rara</td>
<td class="text-center"><input type="checkbox" class="Accept" name="checkbox" value="value"></td>
<td class="text-center"><input type="checkbox" class="Reject" name="checkbox" value="value"></td>
</tr>
<tr>
<td>srara</td>
<td>rfara</td>
<td>3</td>
<td>fafaf</td>
<td>rara</td>
<td class="text-center"><input type="checkbox" class="Accept" name="checkbox" value="value"></td>
<td class="text-center"><input type="checkbox" class="Reject" name="checkbox" value="value"></td>
</tr>
<tr>
<td>srara</td>
<td>rfara</td>
<td>2</td>
<td>fafaf</td>
<td>rara</td>
<td class="text-center"><input type="checkbox" class="Accept" name="checkbox" value="value"></td>
<td class="text-center"><input type="checkbox" class="Reject" name="checkbox" value="value"></td>
</tr>
</tbody>
</table>

相关文章：