时间戳

首页 > 解决方案 > 动态创建的复选框，检查事件监听器

javascript - 动态创建的复选框，检查事件监听器

问题描述

我正在显示服务列表。我不知道列表中有多少服务。因此，我为列出的每个服务创建了一个带有复选框的动态列表。如果表单已提交，我知道如何拉取复选框的状态，但在这种情况下，我需要知道是否在未提交表单的情况下选择了框。我看过使用事件侦听器，但不知道如何指向适当的复选框。如何在不提交表单的情况下检查每个复选框的状态？我正在使用值“$J”为每个复选框指定一个唯一的名称。

PHP和HTML：

for ($J = 0; $J < $size; ++$J) {
    if ($sp->sosts[$J] == 'A') {
        $lbl   = $sp->solbl[$J];  
echo <<<_END
        <form method = 'POST' action = ''>
            <div id = 'currentsrv'>
                <div class = 'servhdr'>
                    <input type = 'checkbox' class = 'servcb' 
                        name = "srvcb$J">
                    <div class = 'servtitle'>
                        <span id = 'servlbl'> Service : </span>
                        <span id = 'servnm'> $lbl </span>
                    </div>
                </div>
            </div>
        </form>
_END;
    }
}

标签： javascriptphpjqueryhtml

解决方案

这是一个向您展示原理的示例。为了方便起见，我使用了 jQuery。

在输出中，true表示选中，false表示未选中。

function printCheckboxStates(){
  let states = $('input[type=checkbox]').toArray().map(c => c.checked);
  let checked = states.filter(checked => checked).length;
  console.log(`${checked} checkboxes are checked`, states);
}
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<div>
	<input type="checkbox">
	<input type="checkbox">
	<input type="checkbox">
</div>

<button onclick="printCheckboxStates()">
	Get checkbox states
</button>

推荐阅读