Home > Developer > JavaScript
Bug description
When the dom structure of the form radio/checkbox is operated as in the following example (or directly affects their structure), the selected checkbox/radio will be automatically restored to the default state, just Like clicking the reset button.
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <ptml> <pead> <title> Rank's HTML document </title> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <meta http-equiv =" Pragma "content =" no-cache "/> <meta http-equiv =" Cache-Control "content =" no- cache "/> <meta http-equiv =" Expires "content =" 0 "/> <meta http-equiv =" ImageToolbar "content =" no "/> <meta Http-equiv = "Creator. name "content =" Rank, BlueDestiny, never-online "/> <style type =" text/css "title =" default "media =" screen ">/* <! [CDATA [*/body {font-size: 80%; line-height: 1.5;} body, button {font-family: arial;} button {padding: 0 0.3em 0 0.3em;} h1, h3 {margin: 0; padding: 0;} h1 {font-size: 2.3em;} h3 {font-size: 1.3em ;} form {display: inline-block;} div. link {padding: 1em;} div. content {background: # ffc; padding: 1em; border: 1px solid #222; margin: 1em 0 1em ;}# rdoWrapper {}# hd {text-align: center ;} /*]> */</style> </pead> <body> IE form control bug from: <em> never-online weblog </em> 1. select radio to checked 2. click button to change dom structure <p class = "p"> <button type = "button" onclick = "handleChangeDom () "> test </button> </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Solution
You can use defaultChecked to set the checked value before DOM operations.
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <ptml> <pead> <title> Rank's HTML document </title> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <meta http-equiv =" Pragma "content =" no-cache "/> <meta http-equiv =" Cache-Control "content =" no- cache "/> <meta http-equiv =" Expires "content =" 0 "/> <meta http-equiv =" ImageToolbar "content =" no "/> <meta Http-equiv = "Creator. name "content =" Rank, BlueDestiny, never-online "/> <style type =" text/css "title =" default "media =" screen ">/* <! [CDATA [*/body {font-size: 80%; line-height: 1.5;} body, button {font-family: arial;} button {padding: 0 0.3em 0 0.3em;} h1, h3 {margin: 0; padding: 0;} h1 {font-size: 2.3em;} h3 {font-size: 1.3em ;} form {display: inline-block;} div. link {padding: 1em;} div. content {background: # ffc; padding: 1em; border: 1px solid #222; margin: 1em 0 1em ;}# rdoWrapper {}# hd {text-align: center ;} /*]> */</style> </pead> <body> fixed IE form control bug from: <em> never-online weblog </em> 1. select radio to checked 2. click button to change dom structure <p class = "p"> <button type = "button" onclick = "handleChangeDom () "> test </button> </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
