Chrome Auto checked单选按钮，带“必需”屏蔽柱的隐藏div

Question

编辑3：啊哈...一些进展。问题实际上是在我忽略的div下面的一些代码中（更新了下面的超文本标记语言以反映）。第二个div包含一个“必需”的输入，所以简单地通过javascript将div更改为显示=无实际上并不会使页面完全忽略隐藏的div。所以稍微改变一下我问题的角度——我将如何调整下面的代码以完全忽略隐藏的div，从而不读取所需的字段？

编辑2：我已经尝试删除下面的第二块JS代码，并将动态PHP代码直接插入到输入和div标记中，以更改显示——仍然没有成功。

编辑1：只是确认一下，类似问题的解决方案在这种情况下不起作用：自动选中单选按钮和php表单处理-如何避免空白字段？Chrome团队似乎在更高版本中进行了更改，这使得该解决方案变得多余。

网站上的用户可以选择积分或邮票-我通过PHP从数据库中获取值，表单应该选中相关的单选按钮，并且只显示与该单选按钮相关的Div。

一切正常，但是，除非我手动更改单选按钮，否则它不会让我张贴表单，即我不能用从数据库中自动选择的值张贴——这似乎是一个类似的问题（Chrome浏览器忽略自动完成=关闭）——但是不管我用Chrome自动完成做什么，它都不起作用。此外，该页面识别为选中的无线电，因为它在正确的位置显示了我的圆点。（编辑3：仍然不确定为什么这在Mozilla中有效，但不是Chrome——但最新的编辑使这一点不那么重要）

下面是我的JS，如果单选按钮被更改，它会显示正确的Div：

$(function () {
          var $divs = $('#option > div');
           $('input[type=radio]').change(function() {
                  $divs.hide();
                  $divs.eq( $('input[type=radio]').index( this ) ).show();
              });
    });

此JS基于DB设置正确的单选按钮，并在页面加载时显示正确的div：

$(function() {
        var $radios = $('input:radio[name=selection]');
        var $type = "<?php echo $type; ?>";


        if($type === 'points') {
            $radios.filter('[value=points]').prop('checked', true);
            document.getElementById('pointsdiv').style.display = 'block';
            document.getElementById('stampdiv').style.display = 'none';

        }
        else if($type === 'stamp') {
            $radios.filter('[value=stamp]').prop('checked', true);
            document.getElementById('stampdiv').style.display = 'block';
            document.getElementById('pointsdiv').style.display = 'none';

        }
    });

我的HTML和PHP：

$type = $_SESSION['user']['type']; //Note: This is actually set at the very top of the page i.e. before the JS

<form autocomplete="off" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST" role="form">

                <input type="radio" id="selection" name="selection" value="points"></input><label>Points</label>
            &nbsp;
            &nbsp;    
                <input type="radio" id="selection" name="selection" value="stamp"></input><label>Stamps</label><br></br>


                <div id="option"> 

                        <div id="pointsdiv"> 
                            //Points related information here
                           <input type="text" required="required"/>
                        </div>
                        <div id="stampdiv"> 
                            //Stamp related information here - below input is required so when pointsdiv is displayed, this entire div should not even load
                          <input type="text" required="required"/>
                        </div>


                   </div>
<button type="submit" class="button">Save</button>
</form>

如果我不更改单选按钮，也就是说，如果加载时选中了“点”，然后单击“保存”按钮，有人知道如何加载此页面并发布表单吗？

Answer 1

输入无线电组必须具有相同的名称，但不具有相同的id，因此您应该为其中一个更改id="选择"。

如果所有内容都在同一个页面中，而该页面使用的是php，那么在设置输入值之前，必须等待dom就绪。

有一种不使用javascript的动态方式：

<input type="radio" <?=$type =='points'?='checked="checked"':''?> id="selection" name="selection" value="points">

你可以用另一个单选按钮，也可以用divs pointsdiv和stampDiv来做同样的事情