Question

我正在显示服务列表。我不知道列表中有多少服务。因此，我为列出的每个服务创建一个带有复选框的动态列表。我知道如何在提交表单时提取复选框的状态，但是在这种情况下，我需要知道是否在未提交表单的情况下选中了复选框。我已经看过使用事件侦听器，但无法弄清楚如何指向适当的复选框。如何在不提交表单的情况下检查每个复选框的状态？我使用值'$ 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;
    }
}

Answer 1

这是一个向您展示原理的示例。为了方便起见，我使用了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>

Answer 2

一种可能的解决方案是为每个复选框都设置一个ID，并且可以在Javascript中执行此操作（如果您知道ID是什么）：

var checkbox = document.getElementById("theID");
if(checkbox.checked) {
  //do something if the checkbox is checked
}

//alternatively, use a variable to store whether the ckeckbox is checked

var isMyCheckboxChecked = checkbox.checked

或者，如果您只想知道选中了多少个复选框，则可以使它们具有相同的类，然后：

var checkboxes = document.getElementsByClassName("yourClass");
var counter = 0; //counter for how many checkboxes are checked
for(var i = 0; i < checkboxes.length; i++) {
  if(checkboxes[i].checked) {
    counter++;
  }
}
console.log("" + counter + " checkboxes are checked.");

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

2 个答案: