javascript - 结合 php 变量和 js 参数

Question

我正在尝试组合来自 PHP 和 JS 的参数。 我浏览了互联网并浏览了该论坛中类似问题的答案。 但是我仍然没有得到一个优雅的解决方案。

JS 中的“(取消)选择所有复选框”功能选择了页面中的所有复选框，而不是属于单个组名的复选框。为了解决这个问题，我为每个组名使用了不同的 ID=''。

不要误会我的意思。但是下面的代码有效!它做了它必须做的事情，但在我看来，这不是最好的方法。 有没有人有更优雅、也许更快的解决方案？

PHP代码:

   echo("<div id='MainMenu'><div class='list-group panel'>");
   $iRow = 1;
   foreach($aAllClasses as $aClassName){
     $sGroupname = str_replace('.', '_', $aClassName[0]);
       echo("<a href='#class".$iRow."' class='list-group-item list-group-item-success' data-toggle='collapse' data-parent='#MainMenu'>".$aClassName[0]."<i class='fa fa-caret-down'></i></a>
             <div class='collapse' id='class".$iRow."'>");
               $aClassStudents = $this->fetchClassStudents($aClassName[0]);                                        
               echo("<input type='checkbox' id='checkUncheckAll".$sGroupname."' onClick='CheckUncheckAll".$sGroupname."()'><b> De gehele groep.</b><br>");
               foreach($aClassStudents as $aStudentRecord){
                  echo("<input type='checkbox' class='selectable".$sGroupname."' value='T' name='student".$aStudentRecord['id']."'> ".$aStudentRecord['sStudentSurname'].", ".$aStudentRecord['sStudentFirstname']." ".$aStudentRecord['sStudentInsertion']." (".$aStudentRecord['iStudentNumber'].")<br>");
               }                                        
               echo("</div>");
               $iRow++;
    }
    echo("</div></div>");

JS 脚本看起来很糟糕:

<?php
$aAllClasses = $oDBactions->fetchAllClasses($eUserIP);                         
?>
<script>
<?php
foreach($aAllClasses as $aClassName){
    $sGroupname = str_replace('.', '_', $aClassName[0]);
    ?>            
        function CheckUncheckAll<?php echo($sGroupname); ?>(){
            var  selectAllCheckbox=document.getElementById("checkUncheckAll<?php echo($sGroupname); ?>");
            if(selectAllCheckbox.checked==true){
             var checkboxes =  document.getElementsByClassName("selectable<?php echo($sGroupname); ?>");
              for(var i=0, n=checkboxes.length;i<n;i++) {
               checkboxes[i].checked = true;       
              }
             }else {
              var checkboxes =  document.getElementsByClassName("selectable<?php echo($sGroupname); ?>");
              for(var i=0, n=checkboxes.length;i<n;i++) {
               checkboxes[i].checked = false;
              }
            }
        }            
<?php } ?>
</script>

Answer 1

更优雅的方法是在所有重复的 HTML 上使用通用类。通过这种方式，您可以删除不必要的增量 id 属性，这些属性会导致比它们解决的问题更多的问题，并为所有元素使用相同的 JS。

然后 JS 需要做的就是找到与“全部切换”相关的所有复选框，使用 DOM 遍历而不是静态选择器，然后将 checked 状态设置为匹配，如下所示:

$('.checkUncheckAll').on('change', function() {
  $(this).closest('div').find(':checkbox').not(this).prop('checked', this.checked);
});

label { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="MainMenu">
  <div class="list-group panel">
    <a href="#class1" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">
      Classname 1
      <i class="fa fa-caret-down"></i>
    </a>
    <div class="collapse">
      <label><input type="checkbox" class="checkUncheckAll"><b> De gehele groep.</b><br>
      <label><input type="checkbox" class="selectable" value="T" name="student[]"> Surname, Firstname 1</label>
      <label><input type="checkbox" class="selectable" value="T" name="student[]"> Surname, Firstname 2</label>
      <label><input type="checkbox" class="selectable" value="T" name="student[]"> Surname, Firstname 3</label>
      <label><input type="checkbox" class="selectable" value="T" name="student[]"> Surname, Firstname 4</label>
    </div>
  </div>
  <div class="list-group panel">
    <a href="#class2" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">
      Classname 2
      <i class="fa fa-caret-down"></i>
    </a>
    <div class="collapse">
      <label><input type="checkbox" class="checkUncheckAll"><b> De gehele groep.</b></label>
      <label><input type="checkbox" class="selectable" value="T" name="student[]"> Surname, Firstname 1</label>
      <label><input type="checkbox" class="selectable" value="T" name="student[]"> Surname, Firstname 2</label>
      <label><input type="checkbox" class="selectable" value="T" name="student[]"> Surname, Firstname 3</label>
      <label><input type="checkbox" class="selectable" value="T" name="student[]"> Surname, Firstname 4</label>
    </div>
  </div>
</div>

请注意，我将复选框包裹在 label 元素中，以使点击区域更大；您现在可以通过单击旁边的文本来选择该框。