我有一个单选按钮,单击该按钮会启用下拉列表,并且从下拉列表中选择不同的值时,会显示不同的复选框。
现在我想保留单选按钮的选择 - 然后选择下拉值及其在页面加载时的复选框。
设计看起来像:
如果我仅选择第三个单选按钮,则下拉列表将启用。
问题:
页面刷新时,单选按钮再次被选中为第一个。
下面是不同控件的 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>
最佳答案
我在像您这样的示例页面底部添加了函数,用于设置最后选定的单选按钮检查的值,并在页面加载时将最后一个单选按钮设置为使用本地存储进行检查。 单击单选按钮时触发的每个函数都需要传递当前单选按钮,并且该函数需要调用 storeSelection 例程。 init 函数使用 key 检查本地存储中的 radio id 值,如果找到 id,则将该 radio 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>
关于Javascript 保留单选按钮值、下拉值和复选框选择值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53777989/