`

Radio Button and CheckBox在FireFox中刷新自动改变选中项

阅读更多

今天开发过程中出现了这样一个问题,我选中radio button list中的一项,然后F5刷新页面,FireFox浏览器会自动上移选中项。太奇怪了!

 

情况,我在页面中有一个

<div id="dialog-add-form-perfile" title="<%: com.nowdocs.nowsource.Admin.Resources.GroupBuyer.AddUserTypeTitle%>"style="display: none;">
    <div id="CurrentGroupUserTypesPer">
        <% Html.RenderPartial("AddUserTypePanel"); %>
    </div>
</div>

 注意当有2个时候,自动上移2个,以此类推。

 

郁闷死我了,我找了好久才找到,是因为这个引起的。

 

在网上找到,原来是因为FireFox的一个bug产生的。

http://www.whypad.com/posts/firefox-radio-button-bug/559/

(这是看到发生的样子)

 

以下是解决方案:

<html>
<head>
	<title>Firefox Autocomplete Test</title>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
                        //这句话很重要!!!
			if($.browser.mozilla) $("form").attr("autocomplete", "off"); 	
			$("#test").after("<input type='text' name='test2' value='Test 2' />"); 
		}); 
	</script>
</head>
<body>
	<h1>Reload this page, radio buttons don't change</h1>
	<p>Adding autocomplete="off" to the form tag fixes the issue. But "autocomplete" is not a valid XHTML attribute, so you may want to do this from jQuery/javascript. View the source of this page to see how.</p>

	<form method="post">
		<input type="text" id="test" name="test1" value="Test" />

		<label><input type="radio" name="radiotest" value="1" checked="checked" /> 1</label>
		<label><input type="radio" name="radiotest" value="2" /> 2</label>
		<label><input type="radio" name="radiotest" value="3" /> 3</label>

	</form>
</body>
</html>
分享到:
评论

相关推荐

    纯css实现适配谷歌、火狐的自定义多选框、单选框颜色

    在网页设计中,自定义多选框(checkbox)和单选框(radio button)的样式是一种常见的需求,尤其是在追求独特用户体验和品牌一致性时。本文将深入探讨如何仅使用CSS技术来实现这一目标,并确保样式在谷歌浏览器...

    【开源】jQuery oform beta 0.1.7 - form 表单美化插件源代码

    版权:zhang yang soft ...支持 reset 按钮 刷新 radio / checkbox / select 优化核心代码 时间: 2010-2-6 8. beta 0.1.7 版 支持"组织机构代码"校验 时间: 2010-2-22 jquery oform 美化 插件 开源

    input、button的不同type值在ajax提交表单时导致的陷阱

    在IE6中,button的type值为submit时,点击按钮将自动提交表单,而在Firefox和IE7中,却需要使用JavaScript来提交表单。 因此,在开发过程中,我们需要小心地设置按钮的type值,否则可能导致不必要的错误。例如,...

    css3单选框和复选框美化特效

    虽然大部分现代浏览器都支持CSS3,但为了确保在所有主流浏览器中正常工作,我们需要测试代码在IE9+、Chrome、Firefox、Safari和Opera等浏览器中的表现,并根据需要添加前缀,如 `-webkit-`、`-moz-` 和 `-ms-`,以...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox和TwinTriggerBox增加EnableEdit属性。 -使用Hidden来显示隐藏ExtAspNet控件,而不是使用Visible属性(Visible目前设置为只读属性...

    ExtAspNet_v2.3.2_dll

    -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox和TwinTriggerBox增加EnableEdit属性。 -使用Hidden来显示隐藏ExtAspNet控件,而不是使用Visible属性(Visible目前设置为只读属性...

    WATIR-WEBDRIVER自动化学习指导

    - Firefox - Chrome - Internet Explorer (IE) - Safari的支持相对较少,可能不被直接支持。 #### 三、支持的网页元素 WATIR-WEBDRIVER支持所有HTML元素,这意味着你可以通过这个工具来定位并操作网页上的几乎所有...

    【开源】jQuery oform beta 0.1.5 - form 表单美化插件源代码

    浏览器支持:IE、Firefox、Opera , google chrome (谷歌) 版本说明: 1. beta 0.1.0 版 支持input text/button 美化 时间:2010-01-25 2. beta 0.1.1 版 支持input radio 单选按钮美化 时间:2010-01-26...

    webdriver API中文版

    - **单选项(Radio Button)**:使用 `click()` 方法选中单选按钮。 - **多选项(Checkbox)**:同理,`click()` 方法可以切换复选框的选中状态。 - **按钮**:点击按钮通常也用 `click()` 方法。 - **左右选择...

    selenium2.0_中文帮助文档

    使用这个驱动器,可以模拟用户在Firefox浏览器中的所有操作。 **2.3 InternetExplorer Driver** InternetExplorer Driver 支持Internet Explorer浏览器,并提供了对IE浏览器的操作接口。需要注意的是,由于IE浏览...

    Bootstrap每天必学之按钮(Button)插件

    在Firefox中,由于浏览器的自动填充特性,可能会导致按钮状态在页面加载时出现问题。为解决这个问题,可以在按钮中添加`autocomplete="off"`属性。 三、单选按钮 要创建单选按钮组,可以使用`...

    2021-2022计算机二级等级考试试题及答案No.12846.docx

    7. 单选按钮(Radio Button)在同一组中只有一个可以选择,而复选框(Checkbox)可以多选。复选框不支持DblClick事件,其Value属性可以是0或1,但单选按钮的选中状态可以通过程序设置。 8. SQL查询包括多种类型,如...

    jQuery html() in Firefox (uses [removed]) ignores DOM changes

    标题中的“jQuery html() in Firefox (uses [removed]) ignores DOM changes”指的是在Firefox浏览器中,使用jQuery的`html()`方法时遇到的一个问题:该方法在处理DOM元素时可能忽视了某些DOM变化。`html()`是jQuery...

    火狐浏览器原型图设计.zip

    7. **交互元素**:火狐浏览器有许多交互元素,如下拉菜单、滑块、复选框和单选按钮,这些可以通过`&lt;select&gt;`, `&lt;option&gt;`, `&lt;input type="range"&gt;`, `&lt;input type="checkbox"&gt;`和`&lt;input type="radio"&gt;`实现。...

    jQuery oform beta 0.1.3 - form 表单美化插件源代码

    浏览器支持:IE、Firefox、Opera , 谷歌浏览器 版本说明: 1. beta 0.1.0 版 支持input text/button 美化 时间:2010-01-25 2. beta 0.1.1 版 支持input radio 单选按钮美化 时间:2010-01-26 3. beta ...

    RobotFramework常见语法.pdf

    - **打开浏览器 (Open Browser)**:此关键字用于启动一个新的浏览器实例并导航到指定的URL,接受两个参数:目标URL和浏览器名称(如Firefox或Chrome)。 - **最⼤化窗⼝ (Maximize Browser Window)**:最大化...

    jQuery复选框美化插件labelauty

    jQuery labelauty插件通常与主流的现代浏览器兼容,包括Chrome、Firefox、Safari、Edge以及IE10+。对于旧版本的浏览器,可能需要检查其对jQuery和CSS3的支持情况。 总的来说,jQuery labelauty插件为复选框和单选框...

Global site tag (gtag.js) - Google Analytics