我有一个<select>三个选项名为 select , Scheme1 , Scheme2 。根据方案#的选择，我必须切换Checkboxes (对于方案1)和radio按钮(适用于方案 2)。
情况1:当我选择Scheme1时选项并选中两个( B 和 C )checkboxes ，没关系。
情况2:当我选择Scheme2时选项并选中radio按钮，我选择 B选项。
现在，如果我再次选择 Scheme1我丢失了之前选择的两个复选框 A 和 B，如果我选择 Scheme2我也失去了我选择的选项 B从单选按钮。
我该如何处理这个问题。目前，每次我绘制新的复选框列表和单选按钮列表时。
如何维护复选框和单选按钮的状态？
我有以下 HTML 代码
<html>
<head>
</head>
<body>
<select name="sltScheme" onchange="funCall(this.value)">
<option value="select">Select Scheme</option>
<option value="Scheme1">Scheme 1</option>
<option value="Scheme2">Scheme 2</option>
</select>
<!-- will be displayed when Scheme 1 is selected but will be overwritten by Radio buttons-->
<div id="schemeContainer" style="display: block; visibility: visible;">
<span id="ele_0">
<input name="schemeType[]" type="checkbox" value="1">
</span>
<lable>A<br></lable>
<span id="ele_1">
<input name="schemeType[]" type="checkbox" value="2">
</span>
<lable>B<br></lable>
<span id="ele_2">
<input name="schemeType[]" type="checkbox" value="3">
</span>
<lable>C<br></lable>
</div>
<!--This separate DIV is just for illustration purpose only. Actually Radio buttons will be overwritten by Checkboxes and vice versa-->
<!-- will be displayed when Scheme 2 is selected but will be overwritten by Checkboxes-->
<div id="schemeContainer" style="display: block; visibility: visible;">
<span id="ele_0">
<input name="schemeType[]" type="radio" value="1">
</span>
<lable>A<br></lable>
<span id="ele_1">
<input name="schemeType[]" type="radio" value="2">
</span>
<lable>B<br></lable>
<span id="ele_2">
<input name="schemeType[]" type="radio" value="3">
</span>
<lable>C<br></lable>
</div>
</body>
</html>
我有以下 JavaScript/jQuery 代码(请注意，我已经添加了 jQuery 库，所以不要与 HTML 代码混淆)
<script>
function funCall(schemeType)
{
var obj = jQuery("input[name='schemeType[]']");
if(schemeType == "scheme1")
{
for(i=0;i<obj.length;i++)
{
var eleval = obj[i].value;
jQuery("#ele_"+i).each(function(i) {
jQuery(this).html('<input value = "'+eleval+'" type="checkbox" name="'+obj[i].name+'" id="'+obj[i].id+'"/>');
});
obj[i].checked = false;
}
}
else if(schemeType == "scheme2")
{
for(i=0;i<obj.length;i++)
{
jQuery("#ele_"+i).each(function(i) {
jQuery(this).html('<input value = "'+eleval+'" type="radio" name="'+obj[i].name+'" id="'+obj[i].id+'"/>');
});
}
}
}
</script>
编辑:
我已删除id复选框和单选按钮的属性，因为使用 name属性。
编辑2:
我在这里显示了 2 个具有相同 id 的 div <div id="schemeContainer"仅用于说明目的。实际上应该只有一个 DIV，而不是两个。我将仅替换该单个 div 中的单选按钮和复选框。
最佳答案
您必须在此处更改一些代码:
1).更改div id(单选按钮容器组)
<div id="schemeContainer1" style="display: block; visibility: visible;">
.......
</div>
2).更改div id(复选框按钮容器组)
<div id="schemeContainer2" style="display: block; visibility: visible;">
.....
</div>
3).更改 JavaScript 以根据部分显示隐藏单选或复选框容器。
function funCall(schemeType)
{
if(schemeType == "Scheme1")
{
jQuery("#schemeContainer1").show();
jQuery("#schemeContainer2").hide();
}
else if(schemeType == "Scheme2")
{
jQuery("#schemeContainer1").hide();
jQuery("#schemeContainer2").show();
}
else
{
jQuery("#schemeContainer2").show();
jQuery("#schemeContainer1").show();
}
}
关于php - 如何使用 jquery 维护单选按钮和复选框的状态(无需刷新页面)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16789368/