Javascript 单击服务时隐藏和显示活动复选框复选框

PHP

我的代码的输出是

• Incometax
  • 返回
  • 填充物
• 商品及服务税
  • 形式
  • 返回
  • GSTR
• TDS
  • 应用
  • 退款

此处Incometax、GST、TDS为服务，其他为服务的相关活动。

---

我想在选中复选框时显示活动，在取消选中复选框时隐藏活动。

请尝试运行整个代码以便更好地理解

<?php 
//for service 1
$all_activities = "select * from activity join displayserviceactivitymap on activity.activity_id = displayserviceactivitymap.activity_id right  join services on services.service_id = displayserviceactivitymap.service_id";    

$all_activities = $conn->query($all_activities) or die ($conn>error.__LINE__);
$activities = [];

while ($row = $all_activities->fetch_assoc()) {
    $activities[] = $row;
}
$repeated = 'repeated';

foreach ($activities as $act) {
  if($act['servicename'] != $repeated){

    echo '<br><input type="checkbox" name="arr['.$act['service_id'].'][service]" value="'.$act['service_id'].'" id="'.$act['service_id'].'">'.$act['service_id'].$act['servicename'].'<br>';
    $repeated = $act['servicename'];
  }

  if($act['activity_id'] != '')

  echo '<input type="checkbox" name="arr['.$act['service_id'].'][activity][]" value="'.$act['activity_id'].'" id="'.$act['activity_id'].'">'.$act['nameofactivity'].'<br>';
}

?>

$（“手风琴”）
.手风琴({
可折叠的：是的，
活动：错误，
高度样式：“内容”，
beforeActivate:功能（事件、用户界面）{
var oldInput=ui.oldHeader.find（'input'）；
oldInput.prop（'checked'），！oldInput.prop（'checked'）//当手风琴关闭时，此位取消选中
var newInput=ui.newHeader.find（'input'）；
//此位检查手风琴何时打开
newInput.prop（'checked'），！newInput.prop（'checked'））
}
}
);

还可以共享您的js代码，

<?php
function array_group(array $data, $by_column) {
    $result = [];
    foreach ($data as $item) {
        $column = $item[$by_column];
        unset($item[$by_column]);
        if (isset($result[$column])) {
            $result[$column][] = $item;
        } else {
            $result[$column] = array($item);
        }
    }
    return $result;
}
$activities = array(
    array('service_id' => '1',
          'servicename' => 'Incometax',
          'activity_id' => '1',
          'nameofactivity' => 'Return'),
    array('service_id' => '1',
          'servicename' => 'Incometax',
          'activity_id' => '2',
          'nameofactivity' => 'filling')
);
$activities = array_group($activities, 'servicename');
?>
<link href = "https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel = "stylesheet" />
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<?php foreach ($activities as $key => $act) { ?>
<div id="accordion">
    <h3>
        <label for='product-44-44'>
            <input type='checkbox'  name="arr[<?php echo $act[0]['service_id']; ?>][service]" value="<?php echo $act[0]['service_id']; ?>" id="<?php echo $act[0]['service_id']; ?>"/>
            <?php echo $key; ?>
        </label>
    </h3>
    <div class="columns">
        <?php foreach ($act as $value) { ?>
        <div class="d1">
            <label>
                <input type="checkbox" name="arr[<?php echo $value['service_id']; ?>][activity][]" value="<?php echo $value['activity_id']; ?>" id="<?php echo $value['activity_id']; ?>">
                <?php echo $value['nameofactivity']; ?>
            </label>
        </div>
        <?php } ?>
    </div>
</div>
<?php } ?>
<script>
    $("#accordion")
    .accordion({
        collapsible: true,
        active: false,
        heightStyle: "content",
        beforeActivate: function (event, ui) {
            var oldInput = ui.oldHeader.find('input');
            oldInput.prop('checked', !oldInput.prop('checked')) // this bit unchecks when the accordion is closed
            var newInput = ui.newHeader.find('input');
            // this bit checks when the accordion is opened
            newInput.prop('checked', !newInput.prop('checked'))
        }
    }
              );
</script>