У меня есть веб-страница, которая возвращает результаты поиска в таблице / форме. Я хотел бы установить флажок «Выбрать все», который будет выбирать все флажки для результатов поиска. Мой код для результатов отображения приведен ниже:
<form action="noJavaScript.php" name="theForm" method="post"> <table style="border: 1px solid black" RULES=ALL FRAME=VSIDES> <th> </th><th>Order #</th><th>Inspector</th><th>Reference #</th><th>Client Name</th><th>Property Address</th><th>City</th><th>State</th><th>Zip</th><th>Inspection Date</th> <?php while ($row = mysql_fetch_assoc($result)) { echo '<tr><td>'; echo '<input type="checkbox" name="selected[]" value="'.$row['order_number'].'"/>'; echo '</td>'; foreach ($row as $key => $value) echo '<td>'.htmlspecialchars($value).'</td>'; echo '</tr>'; } ?> </table> <input type="submit" name="submit" value="Edit/Modify Order" onClick="document.theForm.action='modify.php'"> <input type="submit" name="submit" value="Clone Order" onClick="document.theForm.action='clone.php'"> <input type="submit" name="submit" value="Delete Order" onClick="document.theForm.action='deleteorder.php'"> <input type="submit" name="submit" value="Archive Order" onClick="document.theForm.action='archive.php'"> </form> Я попытался использовать следующую функцию:
<script type="text/javascript" <!-- function SetAllCheckBoxes(FormName, FieldName, CheckValue) { if(!document.forms[FormName]) return; var objCheckBoxes = document.forms[FormName].elements[FieldName]; if(!objCheckBoxes) return; var countCheckBoxes = objCheckBoxes.length; if(!countCheckBoxes) objCheckBoxes.checked = CheckValue; else // set the check value for all check boxes for(var i = 0; i < countCheckBoxes; i++) objCheckBoxes[i].checked = CheckValue; } // --> </script>
И кнопка вроде этого:
<input type="button" onclick="SetAllCheckBoxes('theForm', 'myCheckbox', true);" value="Check All">;
Но я не могу заставить его работать.
Добавьте класс к каждому входному флажку.
echo '<input type="checkbox" name="selected[]" value="'.$row['order_number'].'" class="yourclass" />';
Затем в javascript перебираем все поля ввода в документе и проверяем, есть ли у них как type="checkbox" и class="yourclass" . И установите все из них в ПРОВЕРЕННО!
Вы можете использовать jquery, чтобы сделать это проще
$("form input:checkbox").attr('checked','true');
var form = document.getElementsById('form_id'); var checkBoxes = form.getElementsByTagName('input'); for (var i in checkBoxes) { if (checkBoxes[i].type=="checkbox") checkBoxes[i].checked = true; }
Лучшее решение 4 u – сценарий Jquery
/*Unik Checkbox to mark/desmark other checkboxes*/ <input type="checkbox" onclick="selectAllCheckBoxes(this)" id="checkBoxUnik"/> /*Several other Checkboxes inside loop*/ <input type="checkbox" onclick="unselectCheckBoxUnik()" class="checkBoxInLoop" /> <script> function selectAllCheckBoxes(obj){ $('input:checkbox:not(:disabled).checkBoxInLoop').prop('checked', jQuery(obj).prop('checked')); } function unselectCheckBoxUnik(){ /*first you verify if the quantity of checkboxes equals number of checkboxes*/ a = $('input:checkbox:not(:disabled).checkBoxInLoop:checked').size(); b = $('input:checkbox:not(:disabled).checkBoxInLoop').size(); /*if equals, mark a checkBoxUnik*/ ((a == b)? $('#checkBoxUnik').prop("checked", true) : $('#checkBoxUnik').prop("checked", false)); } </script>