我有一个<select>,其中三个选项分别称为selectScheme1Scheme2。基于方案#的选择,我必须切换Checkboxes(对于方案1)和radio按钮(对于方案2)。

 

情况1:当我选择Scheme1选项并选中两个(BCcheckboxes时,就可以了。

情况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:

我在这里仅出于说明目的显示了具有相同id <div id="schemeContainer"的2个div。实际上,应该只有一个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/

10-12 07:10