Question

任何人都可以通过复选框选择所有选项来帮助我。当我点击复选框时，我需要检查所有复选框。当我点击拒绝检查时拒绝所有。

我被抛出一个场景，我必须从每列中选择一个选项接受或拒绝。用户不应该同时选择加号和拒绝。

并且页面中有多个表并生成动态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/

Answer 1

始终确保您在整个文档中提供唯一ID

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

代码很好jush用类

替换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>

选中All all onclick on复选框并拒绝全部

1 个答案: