Javascript 保留单选按钮值、下拉值和复选框选择值答案

【问题标题】：Javascript retain radio button values, drop down values and check box selection valuesJavascript 保留单选按钮值、下拉值和复选框选择值
【发布时间】：2018-12-14 10:34:50
【问题描述】：

我有一个单选按钮，点击后会启用下拉菜单，从下拉菜单中选择不同的值时，会显示不同的复选框。

现在我想保留单选按钮的选择 - 然后选择下拉值及其在页面加载时的复选框。

设计看起来像：

如果我只选择第三个单选按钮，下拉菜单就会启用。

问题：

在页面刷新时，单选按钮再次被选中为第一个。

下面是不同控件的id。

1) 对于首选项下拉：

<select name="Keys[]" id="key_" rel="" class="key-class" onchange="return getPreferenceValues(this, '');">

Key :

<option value="" alt="">Choose one</option>
<option value="25/checkbox//" alt="25">
    Gender </option>
<option value="26/checkbox//" alt="26">
    Marital Status </option>
<option value="27/radio//" alt="27">
    Education Status </option>
<option value="28/checkbox//" alt="28">
    Employment Status </option>
<option value="29/checkbox//" alt="29">
    Professional Status </option>
<option value="30/checkbox//" alt="30">
    Interests </option>
<option value="31/checkbox//" alt="31">
    Age </option>
<option value="40/date/range/" alt="40">
    DOB </option>
<option value="52/text//" alt="52">
    Home City/Town </option>
<option value="53/text//" alt="53">
    Year of Birth </option>

Delete

2) 对于复选框：

<span id="valueResponse_" class="valueResponse-class"> Value :


<label id=""><input class="targetSetting" type="checkbox" name="Values[25][]" id="value_" value="207">Male</label>
  <label id=""><input class="targetSetting" type="checkbox" name="Values[25][]" id="value_" value="208">Female</label>
  <label id=""><input class="targetSetting" type="checkbox" name="Values[25][]" id="value_" value="209">Other</label>
  <label id=""><input class="targetSetting" type="checkbox" name="Values[25][]" id="value_" value="0">Any</label>
  <span style="color:red;" class="value-error-class" id="value_error_"></span>

</span>

单选按钮代码：

<input class="targetSettingRegisteredUsers inputabs" type="radio" id = "all_reg_users" name="target_criteria" value="registered_users" onclick="allregisteredCountFun()" checked="checked"> Select All Registered Users<br><br>
<input class="inputabs" type="radio" id = "all_optedIn_users" name="target_criteria" value="optedin_users" onclick="optedinCountFun();"> Select All Opted-In Users<br><br>
<input class="inputabs" type="radio" id ="pref_checkbox" name="target_criteria" value="preference_based_users" onclick="preferenceBasedCountFun()"> Select based on preference<br><br>

【问题讨论】：

HTML 是无状态的，这意味着您在加载页面后所做的任何更改都将在下次加载页面时丢失。如果要保存状态，则需要手动进行。我建议查看 localStorage、cookie 或使用 AJAX 将数据发送到服务器。哪个最合适取决于您的具体用例。
如果我必须使用本地存储，如果下拉列表中有 10 个值，并且从 dd 中选择每个值，则大约有 15 个复选框，您能否使用本地存储提供最佳解决方案或cookies

标签： javascript php jquery html mysql

【解决方案1】：

我在像您这样的示例页面的底部添加了一些功能，这些功能设置了最后选择的单选按钮检查的值，并在页面加载时将最后一个单选按钮设置为使用本地存储进行检查。单击收音机时触发的每个函数都需要传递当前收音机，并且该函数需要调用 storeSelection 例程。 init 函数使用键检查本地存储中的无线电 id 值，如果找到 id，则将该无线电 id 的检查值设置为 true。

<div class="row">
<div class="col">
    <input class="targetSettingRegisteredUsers inputabs" type="radio" id="all_reg_users" name="target_criteria" value="registered_users" onclick="storeSelection(this)" checked="checked"> Select All Registered Users<br><br>
    <input class="inputabs" type="radio" id="all_optedIn_users" name="target_criteria" value="optedin_users" onclick="storeSelection(this);"> Select All Opted-In Users<br><br>
    <input class="inputabs" type="radio" id="pref_checkbox" name="target_criteria" value="preference_based_users" onclick="storeSelection(this)"> Select based on preference<br><br>
</div>

<script type="text/javascript">
    var key = "user_selection"
    var lastSelection;
    function storeSelection(el) {
        window.localStorage.setItem(key, el.id);
    }
    function init() {
        var last = window.localStorage.getItem(key);
        if (last) {
            document.getElementById(last).checked = true;
        }
    }
    init();
</script>

【讨论】：