问题描述
我正在重构一些旧的 PHP/js/jquery/Perl/etc 代码。
任何人都可以提出一种更简单更清晰的方法来完成这项工作吗?基本上,它捕获由单选按钮选择的 1 到 8 之间的值,然后在激活包含它的表单时触发的 javascript 函数获取该值。我对这一切都很陌生。
整个系统以 PHP 为主
<!-- SENDER: NUM PASSENGER (RAdio) BUTTON -->
<td colspan="2" rowspan="1" style="vertical-align: top;color: #000000">
<input name="passgr" id="passgr1" value="1" type="radio" checked="checked"
onClick="insphv(1)">1
<input name="passgr" id="passgr2" value="2" type="radio" onClick="insphv(2)">2
<input name="passgr" id="passgr3" value="3" type="radio" onClick="insphv(3)">3
<input name="passgr" id="passgr4" value="4" type="radio" onClick="insphv(4)">4
<input name="passgr" id="passgr5" value="5" type="radio" onClick="insphv(5)">5
<input name="passgr" id="passgr6" value="6" type="radio" onClick="insphv(6)">6
<input name="passgr" id="passgr7" value="7" type="radio" onClick="insphv(7)">7
<input name="passgr" id="passgr8" value="8" type="radio" onClick="insphv(8)">8
<input type="hidden" name="tpassenger" id="tpassenger" />```
</td>
var passgrval=0;
<!-- RECEIVER: NUM PASSENGER (RAdio) BUTTON -->
if (document.getElementById('passgr1').checked) {
passgrval=1;
} else if (document.getElementById('passgr2').checked) {
passgrval=2;
} else if (document.getElementById('passgr3').checked) {
passgrval=3;
} else if (document.getElementById('passgr4').checked) {
passgrval=4;
} else if (document.getElementById('passgr5').checked) {
passgrval=5;
} else if (document.getElementById('passgr6').checked) {
passgrval=6;
} else if (document.getElementById('passgr7').checked) {
passgrval=7;
} else if (document.getElementById('passgr8').checked) {
passgrval=8;
}
解决方法
您可以改用事件委托 - 添加更改侦听器并查看目标是否是 <input>
之一,如果是,请检查其值:
var passgrval = 0;
window.addEventListener('change',(e) => {
if (e.target.matches('[name=passgr]')) {
passgrval = e.target.value;
console.log(passgrval);
}
});
<td colspan="2" rowspan="1" style="vertical-align: top;color: #000000">
<input type="radio" name="passgr" value=1 checked>1
<input type="radio" name="passgr" value=2>2
<input type="radio" name="passgr" value=3>3
<input type="radio" name="passgr" value=4>4
<input type="radio" name="passgr" value=5>5
<input type="radio" name="passgr" value=6>6
<input type="radio" name="passgr" value=7>7
<input type="radio" name="passgr" value=8>8
<input type="hidden" name="tpassenger" id="tpassenger" />```
</td>
或者,甚至更好,如果可能的话,不要重新分配 passgrval
,只在需要处理时检索当前检查的输入值:
const val = document.querySelector('[name=passgr]:checked').value;