我怎样才能更好地使用 javascript 和/或 PHP [关闭]答案

【问题标题】：How can I write this in better using javascript and/or PHP [closed]我怎样才能更好地使用 javascript 和/或 PHP [关闭]
【发布时间】：2021-01-20 18:38:11
【问题描述】：

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

【问题讨论】：

insphv 函数里面是什么？
是的，简单多了。在所有 passgr 输入中分配一个共享类，然后在 JS 中遍历它们以找出检查了哪一个。然后，您可以从所有这些中删除 id 属性。或者，您可以使用 jQuery 轻松找到选中的 $('input[name=radioName]:checked', '#myForm').val()

标签： javascript php coding-style

【解决方案1】：

您可以改用事件委托 - 添加一个更改侦听器并查看目标是否是 <input>s 之一，如果是，请检查其值：

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;

【讨论】：