Article original, reproduced please note the article from: http://blog.csdn.net/xxd851116/archive/2009/03/16/3994833.aspx
Defects of Single-choice buttons on the webpage: when one group of single-choice buttons is selected, the reorganization button cannot be unselected, resulting in one option being selected and poor user experience.
Solution:
Use JavaScript (use the checkbox to cancel selection to change the single-choice button)
Function checkboxtoradio (checkboxname, form) {<br/> If (checkboxname = NULL) return; <br/> var F = form | document. forms [0]; <br/> checkboxs = document. getelementsbyname (checkboxname); </P> <p> for (I = 0; I <checkboxs. length; I ++) {<br/> checkboxs [I]. onclick = function () {<br/> for (j = 0; j <checkboxs. length; j ++) {<br/> If (this. value! = Checkboxs [J]. value & checkboxs [J]. checked = true) {<br/> checkboxs [J]. checked = false; <br/>}< br/>}
Test code:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> new document </title> <br/> <meta name = "generator" content = "editplus"/> <br/> <meta name = "author" content = ""/> <br/> <meta name = "keywords" content = ""/> <br/> <meta name = "Description" content =" "/> <br/> </Head> </P> <p> <body> <br/> <form> <br/> your city: <input type = "checkbox" name = "city" value = "0"/> Anhui <br/> <input type = "checkbox" name = "city" value = "1 "/> Zhejiang <br/> <input type =" checkbox "name =" city "value =" 2 "/> Jiangsu <br/> <input type =" checkbox "Name = "city" value = "3"/> Beijing <br/> <input type = "Submit" name = "Submit" value = "Submit"> <br /> </form> <br/> <MCE: script Type = "text/JavaScript"> <! -- <Br/> checkboxtoradio ("city"); <br/> function checkboxtoradio (checkboxname, form) {<br/> If (checkboxname = NULL) return; <br/> var F = form | document. forms [0]; <br/> checkboxs = document. getelementsbyname (checkboxname); </P> <p> for (I = 0; I <checkboxs. length; I ++) {<br/> checkboxs [I]. onclick = function () {<br/> for (j = 0; j <checkboxs. length; j ++) {<br/> If (this. value! = Checkboxs [J]. value & checkboxs [J]. checked = true) {<br/> checkboxs [J]. checked = false; <br/>}< br/> // --> </MCE: SCRIPT> <br/> </body> <br/> </ptml> <br/>
Test results:
1. SelectAnhui ProvinceZhejiangAfter Jiangsu, it was finally determined to be Jiangsu, and Anhui and Zhejiang were not selected;
2. After clicking submit, the address is displayed as: file: // D:/Java/IDE/Eclipse/checkboxtoradio.html? City = 2 & submit = submit
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
