当前位置: 首页 > 知识库问答 >
问题:

如何使用jquery维护单选按钮和复选框的状态(无需刷新页面)

姬安志
2023-03-14

我有一个<代码>

案例1:当我选择Scheme1选项并选中两个(BC复选框时,一切正常。

案例2:当我选择Scheme2选项并选中单选按钮时,我选择了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


共有2个答案

何乐
2023-03-14

如果我读对了你的html注释,问题不是你不能有两个div,而是你不想在表单最终发送时提交两个div。我会考虑Raskesh的解决方案(使用切换来显示和隐藏已经选择的选项),但是添加隐藏的表单元素的禁用项,并在可见时启用,这样就不会在服务器上提交提交的禁用字段集。

此外,如果您对只使用HTML5的解决方案感到满意,field set现在可以使用禁用属性来禁用其中的所有分形表单控件,从而无需在复选框中循环来禁用每个复选框。

这里有一个方法可以让jQuery的代码变得更轻:用一个共享类(比如“可交换”)将所有可交换的表单字段包装在字段集中,并将其设置为显示/隐藏。然后有一个函数监听字段集何时可见/隐藏,a)为HTML5浏览器将字段集设置为禁用(当隐藏时)或不禁用(当可见时),并且还有一个选择器,用于隐藏并具有可交换类的字段集的所有表单字段类型的后代,并为特定字段设置/取消设置禁用属性。通过为所有可交换包装器使用一个类,您不仅可以更容易地选择字段,还可以避免意外禁用故意隐藏的字段。如果您合并了现代izr,如果字段集接受禁用属性,您可以跳过每个字段禁用。

裴宜春
2023-03-14

您必须在此处更改一些代码:

1). 更改分区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();
    }
}
 类似资料:
  • 这是一个 列表 拓展,可以用来创建单选和复选按钮组。 复选按钮组 <div class="list-block"> <ul> <!-- Single chekbox item --> <li> <label class="label-checkbox item-content"> <!-- Checked by default -->

  • 问题内容: 我有一个与此非常相似的JTable。 http://docs.oracle.com/javase/tutorial/uiswing/components/table.html#sorting 我已经设法在其上设置了普通过滤器(搜索功能),并且效果很好。我想要一个按钮,该按钮将立即仅显示选中素食的行。 好吧,现在感谢@peeskillet和@HovercraftFullOfEels提供的

  • 问题内容: 我已经在单选组中动态创建了两个单选按钮,并选中其中一个。我需要在我按下另一个按钮时将其值保存在字符串中。但是我已经为此实现了,但是第一次没有用。这是我的代码。 问题答案: xml文件 Java代码

  • 主要内容:Checkbutton复选框控件单选框按钮控件(Radiobutton),同样允许用户选择具体的选项值,不过与 Listbox 相比,单选按钮控件仅允许用户选择单一的选项值,各个选项值之间是互斥的关系,因此只有一个选项可以被用户选择。 Radiobutton 控件通常都是成组出现的,所有控件都使用相同的变量。Radiobutton 可以包含文本或图像,每一个按钮都可以与一个 Python 函数相关联。当按钮被按下时,对应的函数会

  • 描述 (Description) 复选框可用于从列表中选择多个选项; 单选按钮可用于仅选择一个选项。 在fieldset元素中包含一组复选框和单选按钮,并使用legend元素为它们提供公共文本。 fieldset元素中的每个控件都必须具有单独的标签,可以使用label标签创建。 例子 (Example) 以下示例演示了在Foundation中使用checkboxes and radio butto

  • 问题内容: 我尝试用jQuery检查单选按钮。这是我的代码: 和JavaScript: 不起作用: 不起作用: 不起作用: 你还有其他主意吗?我想念什么? 问题答案: 对于等于或大于(> =)1.6的jQuery版本,请使用: 对于(<)1.6之前的版本,请使用: 提示:之后, 您可能还想打电话或单击单选按钮。 查看评论以获取更多信息。