Question

我的代码如下所示。

$box = $ui->box()
          ->title('Select Eligible Branches')
          ->solid() 
          ->uiType('primary')
          ->open();

    echo "Please select courses tab below.<br>";
    $myTabBox = $ui->tabBox();
    foreach ($courses as $key => $value)
        $myTabBox->tab($key."_tab",$value['name']);

    $myTabBox->open();

    foreach ($courses as $key => $course_details) {
        $tab1 = $ui->tabPane()
                   ->id($key."_tab")
                   ->containerClasses('eligible_tabpane')
                   ->open();
        $table = $ui->table()
                    ->hover()
                    ->bordered()
                    ->responsive()
                    ->condensed()
                    ->width(12)
                    ->open();


        foreach ($course_details['branches'] as $k => $branch_detail) {
            $f=0;
            for($i=0;$i<sizeof($course_branch_id);$i++) {
                if($course_branch_id[$i]==$branch_detail['course_branch_id'])
                $f=1;
            }
            if($f==1){
                echo "<tr><td><label><input type='checkbox' name='eligible_cb[]' checked value='".$branch_detail ['course_branch_id'].'_'.$course_details['id']."'> ".$branch_detail['name']."</label></td></tr>";
            }
            else{
                echo "<tr><td><label><input type='checkbox' name='eligible_cb[]' value='".$branch_detail ['course_branch_id'].'_'.$course_details['id']."'> ".$branch_detail['name']."</label></td></tr>";
            }
        }

        $table->close();
        $tab1->close();
    }

    $myTabBox->close();
$box->close();

我想以某种方式检查/取消选中所选课程的分支的所有复选框。

例如在下面的图片中应该有一些方法来选择“技术学士”的所有分支，同样当选择“技术硕士”时，也应该有一些方法来选择所有的分支。目前我必须手动选择不同课程的每个分支。

UI of code above

Answer 1

我看到你标记了jquery所以我采用了这种方法。您可以添加一个复选框以将其用作全选

<input type="checkbox" id="checkAllBachelors">

之后用jquery你可以做这样的事情

$('#checkAllBachelors').click(function(){
        if($(this).is(':checked')){
            $('.bachelors').prop('checked', true);
        }else{
            $('.bachelors').prop('checked', false);
        }
    });

您可以对其他标签使用相同的方法，使用另一个带有其他标识的复选框。

选择/取消选中分支列表的所有复选框

1 个答案: