如何使用 javascript 和/或 PHP 更好地编写此代码

如何解决如何使用 javascript 和/或 PHP 更好地编写此代码

我正在重构一些旧的 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;