Можете ли вы реализовать флажок «выбрать все» в HTML без JavaScript?

Question

Я ищу чистый способ реализации печально известного флажка «выбрать все», но я бы предпочел решение без JavaScript. Кто-нибудь знает, есть ли способ сделать это?

Заранее спасибо

Answer 1

Хотя часть этой функциональности можно реализовать без использования JavaScript, я не рекомендовал бы ее, поскольку она не работает в старых браузерах.

Вы можете использовать псевдокласс CSS3 :target для переключения между <form> в вашей разметке. Демо: http://jsfiddle.net/mathias/kFH3e/

Как видите, на самом деле это не «переключение» флажков, а только формы; и если вы уже отметили несколько полей в одной из форм, они все равно будут отмечены после переключения туда и обратно.

Это один из случаев, когда вполне приемлемо использовать JavaScript, поскольку кнопки «выбрать все / ничего» только улучшают пользовательский интерфейс; это все еще приемлемый опыт без них.

TL; DR В этом случае можно использовать JavaScript.

Answer 2

К сожалению, невозможно установить все флажки без некоторых сценариев. HTML является статическим языком и не может манипулировать собой без отправки запроса. Вам нужно будет реализовать JavaScript, чтобы использовать окно выбора всех. Вы можете использовать один из следующих двух:

Jquery

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
 function toggleChecked(status) {
  $(".checkbox").each( function() { // if checkboxs have class
   $(this).attr("checked",status);
  })
 }

Javascript

 function selectToggle(toggle, form) {
  var myForm = document.forms[form];
      for( var i=0; i < myForm.length; i++ ) { 
          if(toggle) {
              myForm.elements[i].checked = "checked";
         } 
          else {
              myForm.elements[i].checked = "";
          }
      }
 }

Answer 3

клиентское решение

Нужно использовать javascript, чтобы когда флажок установлен, чек отдыхает

серверное решение

Нужно перезагрузить страницу

при нажатии на ссылку перезагрузить страницу со всеми отмеченными флажками в php

Пример серверного решения

if (isset($_GET['selectall'](){
    $check_status = " checked";
else {
    $check_status = "";
}


for ($i=0;$i<100;$i++){
    /* Line Codes */
    print "<input  type=\"checkbox\" name="\checkname\" $check_status>";
    /* Rest Codes */
}