PHP页面点击按钮触发alert展示选中checkbox对应样本ID实现咨询

第一步：修复现有代码问题 #

首先你现有代码有2个明显错误需要先处理：

• 同一个页面出现了重复ID的checkbox（每行检测项你写了2个同ID的checkbox），会导致JS选择异常，需要删掉多余的
• 重复引入了两次不同版本的jQuery，会引发冲突，只保留一个即可

第二步：修改PHP渲染逻辑 #

给每个检测项的checkbox增加data-sample-id自定义属性，直接把对应样本ID存在标签上，方便JS读取，修改后的foreach渲染部分代码如下：

<?php
foreach ($newTestList as $test) {
    $num = $increment++;
    switch ($test->reportStatus) {
        case 'cancelled':
            $reportStatusDisplay = "<span class='alert-danger'>"._('Cancelled')."</span>";
            break;
        case 'negative':
        case 'positive':
            $reportStatusDisplay = "<span class='alert-info'>"._('Available')."</span>";
            break;
        default:
            $reportStatusDisplay = '';
            break;
    }
?>
<tr>
    <td>
        <!-- 只保留一个checkbox，加data属性存样本ID，给普通检测项checkbox加统一类名test-checkbox方便选择 -->
        <input type="checkbox" name="checkbox-<?=$num?>" id="checkbox-<?=$num?>" class="test-checkbox" data-sample-id="<?= $test->sampleID ?>"/>
        <label for="checkbox-<?=$num?>" class='smallLabel'></label>
    </td>
    <td>
        <?=$test->sampleID?>
    </td>
    <!-- 其他列的代码你自己保留即可 -->
</tr>
<?php } ?>

第三步：修改按钮的点击事件 #

把原来按钮的confirm换成我们自定义的获取选中ID的函数：

<h4>
   <a href="javascript:void(0)" class="btn btn-info" onclick="showSelectedSampleIds()">
     <br><small>TEST ID</small></a>
</h4>

第四步：调整JS逻辑 #

只保留一份jQuery，新增获取选中ID的函数，优化全选逻辑：

<!-- 只保留一个版本的jQuery即可 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// 全选功能优化，只选中普通检测项的checkbox，不把全选自身算进去
$('#select-all').click(function(event) {   
    $('.test-checkbox').prop('checked', this.checked);
});

// 按钮点击触发的函数，收集所有选中的样本ID弹出
function showSelectedSampleIds() {
    const selectedIds = [];
    // 遍历所有选中的检测项checkbox
    $('.test-checkbox:checked').each(function() {
        selectedIds.push($(this).data('sample-id'));
    });
    if(selectedIds.length === 0) {
        alert('你没有选中任何检测项');
        return;
    }
    alert('选中的样本ID：\n' + selectedIds.join('\n'));
}

// 如果你需要选中单个checkbox时就弹出对应ID，再加这段即可
$('.test-checkbox').click(function() {
    if(this.checked) {
        alert('当前选中的样本ID：' + $(this).data('sample-id'));
    }
});
</script>

修改完成后即可实现你要的效果：点击按钮弹出所有选中的样本ID，勾选单个检测项时也可以直接弹出对应ID。

内容的提问来源于stack exchange，提问作者WIPER