jQuery 在 IE 上 clone checkbox 的問題。

前陣子在處理客戶更改版面的需求時，為了偷懶，結果發現了一個 jQuery 在 IE 上 clone 元素的問題。

先簡單說明一下例子：

如上圖所示，我希望在按下「複製」按鈕後，藍色區塊中的 checkbox 被勾選的項目會被複製到紅色區塊中：

這裡我簡單的使用 jQuery 的 clone 方法來完成它，原始程式如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>測試</title><script type="text/javascript" src="jquery/1.2.6.js"></script><script type="text/javascript">$(function () {$('#copy').click(function () {$('#target').html('').append($('input.test:checked').clone());});});</script></head><body><div id="source" style="border:1px solid #33F; padding: 20px; width: 200px;"><input type="checkbox" name="test[]" class="test" value="1" /><input type="checkbox" name="test[]" class="test" value="2" /><input type="checkbox" name="test[]" class="test" value="3" /><input type="checkbox" name="test[]" class="test" value="4" /></div><br /><div id="target" style="border:1px solid #F33; padding: 20px; width: 200px;"></div><br /><input type="button" value="複製" id="copy" /></body></html>

在非 IE 的瀏覽器上， jQuery 的 clone 方法可以正確的把已勾選的 checkbox 的 checked 狀態複製下來，但在 IE 上卻不行，如下圖：

所以這裡只好針對 IE 再進行一次特別的處理：

$(function () {$('#copy').click(function () {var $checkedValues = $('input.test:checked').clone();if ($.browser.msie) {$checkedValues.attr('checked', true);}$('#target').html('').append($checkedValues);});});

原理很簡單，就是遇到 IE 時，再將複製下來的 checkbox 的 checked 屬性設為 true 即可。

補充：IE6 的逆襲

不過上述程式在 IE6 又會出現問題了，在 IE6 上執行時，會發現 checked 屬性無法正常被設為 true 。

雖然沒有深入去研究，但我猜想是 IE6 在處理 DOM 時的問題，因此我祭出了 setTimeout 大法：

$(function () {$('#copy').click(function () {var $checkedValues = $('input.test:checked').clone();if ($.browser.msie) {setTimeout(function () { $checkedValues.attr('checked', true); }, 0);}$('#target').html('').append($checkedValues);setTimeout(function () {// 其他可能會對處理到 checkbox 的動作}, 0);});});

這裡 setTimeout 可以確保程式在 DOM 完全更新後，再執行下一步的動作。

jQuery 在 IE 上 clone checkbox 的問題。相关推荐

淺談Raid Cache Memory上應用的問題和實踐
$1, Raid和Cache Memory 通常,出於二個目標:安全和性能,我們在生產環境的服務器上會設置Raid功能.最常見的場景是,我們會由於安全性的考慮將磁盤設置成Raid 1 或Raid 5. ...
android webview fragment,android studio中Fragment使用webview返回上一頁的問題
在Fragment中使用了騰訊的X5 webview,雖然好用,但是在Fragment中傳遞消息困難,想要返回上一頁,還得各種消息傳遞什么的,麻煩.可是在Fragment中又不能使用onKeyDown ...
delphi每次mysql密码BDE_关于DELPHI中BDE连接不上ORACLE数据库的問題
Delphi连接Oracle数据库的三种方式 Oracle是以高级结构化查询语言(SQL)为基础的大型关系数据库,是目前最流行的客户/服务器(CLIENT/SERVER)体系结构的数据库之一,目前被广 ...
4.3.用python解決經典問題:生日悖論, birthday paradox
1.問題描述及思路生日悖論是指在一羣人中, 出現兩个人(或多个人)的生日在同一天的概率遠比直覺判斷的大得多. 因此也可以解釋爲啥每个班都有人會在同一天過生的現象. 其實從數學上求解這个問題更簡單, ...
jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中
例:将多个选中的checkbox的值组装成一个字符串 <script type=text/javascript> function addMem(){ //var followers = ...
jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
jQuery操作复选框checkbox技巧总结 --- 设置选中.取消选中.获取被选中的值.判断是否选中等一.checked属性定义先了解下input标签的checked属性: 1.HTML &l ...
jquery ajax java上传文件_jQuery Ajax方式上传文件的方法
jQuery Ajax方式上传文件用到两个对象第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这 ...
JQUERY获取text,areatext,radio,checkbox,select值
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关获取一组radio被选中项的值 var item = $('in ...
ajax 批量上传图片插件,jQuery多文件上传插件jquery.imageuploader.js
插件描述:jQuery多文件上传插件jquery.imageuploader.js,可以同时上传多个文件并支持拖拽上传 jquery.imageuploader.js 一款jquery多文件上传插件. ...

jQuery 在 IE 上 clone checkbox 的問題。

補充：IE6 的逆襲

jQuery 在 IE 上 clone checkbox 的問題。相关推荐

最新文章

热门文章