チェックボックスをオンにしてチェックボックスをオンにするとすべて拒否となります

チェックボックスをオンにすると、誰でも選択できます。チェックボックスをオンにすると、すべてのチェックボックスをオンにする必要があります。拒否チェックをクリックするとすべて拒否されます。チェックボックスをオンにしてチェックボックスをオンにするとすべて拒否となります

私は、それぞれの列から1つだけのオプションを選択するか、受け入れるか拒否するかのシナリオを投げます。ユーザーはaccepptとrejectの両方を選択することができません。

このページには複数のテーブルがあり、動的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/

出典

2016-04-27 Ramki

常にあなたが#AcceptAllがあるため、使用しているループの繰り返し、あなたのケースでは、文書全体で

に一意のIDを与えることを確認します。そのためにクラスを使用してください。

コードは、この

$(".AcceptAll")

チェッククラス

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

とし、jqueryの使用中のIDを交換jush okです。このうち

$(".AcceptAll").bind("change", function() { 
 
\t \t \t $(this).closest("table").find(".Reject").prop("checked", false); 
 
      $(this).closest("table").find(".Accept").prop("checked", $(this).prop("checked")); 
 
     }); 
 

 
     $(".RejectAll").bind("change", function() { 
 
     \t $(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> 
 
\t <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>

出典

2016-04-27 16:37:51

ありがとう..しかし、私が受け入れてすべてを拒否すると、両方のボックスが選択されています。私は各行で1つだけを選択する必要があります。私が持っている主な問題はどれですか – Ramki

あなたはhttps://jsfiddle.net/7mgcncnk/1/を確認しましたか？まだ問題がある場合は、コードを更新してください。 –

そうです。申し訳ありませんが正しく説明していない。問題は、受け入れるか拒否するかを選択するオプションを1つだけ選択することです。何も起こらないはずのすべてのチェックボックスをクリックしますか？ – Ramki

チェックボックスをオンにしてチェックボックスをオンにするとすべて拒否となります

答えて

関連する問題