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

阳光穿透心脏的1/2处 2023-07-16 06:00 1阅读 0赞

**目录**

单选按钮

需求

实现

效果

--------------------

## 单选按钮 ##

> <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。**

<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>
    
    <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>

## 效果 ##

## ![20200318100055344.gif][] ##

--------------------

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

[20200318100055344.gif]: /images/20230528/6928aeafe518462b909f6f83a860eec2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N4MjQzNjk4_size_16_color_FFFFFF_t_70]: /images/20230528/99fb6e1c1a9a4e3789a80ffd15c137a9.png