页面刷新时实现单选按钮radio值不变

目录

单选按钮

 需求

实现

效果​

---

单选按钮

<input type="radio"> 标签定义了表单单选框选项，我们平时使用单选按钮的时候，一般会选中默认radio值。这时候我们会使用checked来实现。

<form>
    <input type="radio" name="sex" value="male" checked>Male<br>
    <input type="radio" name="sex" value="female">Female
</form>

 需求

现在有这样一个“合理”的需求，是啥呢。就是我第一次选中radio单选按钮,刷新页面后，radio并不是为默认值，而是仍然是我上一次选中的值。当我改变radio时，下一次仍然是取我上一次的radio值。

实现

思路：遍历所有radio,使用cookie来达到checked。

<!--js片段-->
<script language="javascript" type="text/javascript">
      function save() {
          var radios = document.getElementsByName("drawNum");
          for (var i = 0; i < radios.length; i++) {
              if (radios[i].checked) {
                  document.cookie = 'radioindex=' + i;
              }
          }
      }

      window.onload = function () {
          var cookies = document.cookie;
          if (cookies != "") {
              cookies = "{\"" + cookies + "\"}";
              cookies = cookies.replace(/\s*/g, "").replace(/=/g, '":"').replace(/;/g,'","');
              var json = eval("(" + cookies + ")"); //将coolies转成json对象
              document.getElementsByName("drawNum")[json.radioindex].checked = true;
          } else {
              save();
          }

      }
</script>
<!--html片段-->
<label class="radio-inline" style="font-family: 'Microsoft YaHei UI';font-size: large;">
        <input type="radio" name="drawNum" id="optionsRadios3" value="A" onclick="save()">A
</label>

<label class="radio-inline" style="font-family: 'Microsoft YaHei UI';font-size: large;">
        <input type="radio" name="drawNum" id="optionsRadios4" value="B" onclick="save()">B
</label>

<label class="radio-inline" style="font-family: 'Microsoft YaHei UI';font-size: large;">
        <input type="radio" name="drawNum" id="optionsRadios6" value="C" onclick="save()">C
</label>

<label class="radio-inline" style="font-family: 'Microsoft YaHei UI';font-size: large;">
        <input type="radio" name="drawNum" id="optionsRadios7" value="D" onclick="save()">D
</label>

<label class="radio-inline" style="font-family: 'Microsoft YaHei UI';font-size: large;">
        <input type="radio" name="drawNum" id="optionsRadios5" value="D" onclick="save()">D
</label>

<label class="radio-inline" style="font-family: 'Microsoft YaHei UI';font-size: large;">
        <input type="radio" name="drawNum" id="optionsRadios8" value="E" onclick="save()">E
</label><br>

<label class="form-inline" style="margin-top: 20px;">输入编号:
        <input id="part" type="text" class="form-control" name="partNum" autofocus="autofocus">
</label>

<label class="form-inline">检查员:
        <input id="checker" type="text" class="form-control" value="test" name="stockMan" autofocus="autofocus">
</label>

<button class="btn btn-info" id="submitBtn" type="submit">提交</button>
<button type="button" id="resetBtn" class="btn btn-success">重置</button>

<label class="form-inline">开始时间:<input type="text" name="startDate" id="startDate"
 placeholder="yyyy-MM-dd" autocomplete="off" class="form-control">
</label>

<label class="form-inline">结束时间:
        <input type="text" name="endDate" id="endDate" placeholder="yyyy-MM-dd" autocomplete="off" class="form-control">
</label>

<button class="btn btn-info" type="submit">导出</button>

效果

---

不忘初心，如果您认为这篇文章有价值，认同作者的付出，可以微信二维码打赏任意金额给作者（微信号：cx18375319923）哦，Thanks♪(･ω･)ﾉ