The Checbox check box implements the single-selection function of the Radio radio box:
You know the check box can be selected more than once, radio button can only select one of them, but the radio button is more overbearing, you select, you can only and must select one, all below the checkbox check box to simulate the implementation of the radio button, but the ability to uncheck the item.
The code is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><style>span, input{float: Left;}input{width:14px;Height:14px;}span{Margin-right:20px;}</style><Scripttype= "Text/javascript"src= "Mytest/jquery/jquery-1.8.3.js"></Script><Scripttype= "Text/javascript"> $(function(){ $(": CheckBox"). Click (function(){ if($( This). attr ("checked")!=undefined) { $( This). Siblings (). attr ("checked",false); } }) }) </Script></Head><Body><Div> <inputtype= "checkbox" /> <inputtype= "checkbox" /> <inputtype= "checkbox" /> <inputtype= "checkbox" /> <inputtype= "checkbox" /> <inputtype= "checkbox" /></Div></Body></HTML>
The above code implements the function we want, and the following describes its implementation.
A. Code Comment:
1.$ (function () {}), the document structure is fully loaded and then executes the code in the function.
2.$ (": CheckBox"). Click (function () {}), register the click event handler for the CheckBox check box.
3.if (This). attr ("checked")!=undefined) {}, determines whether the current check box is selected, because if the check box is not selected, the return value of the attr () function is undefined, and the return value checked if selected.
4.$ (This). Siblings (). attr ("checked", false), if the current click is selected, then uncheck all of its brothers check boxes.
Two. Related reading:
The 1.attr () function can be found in the attr () method section of jquery .
The 2.siblings () function can be found in the siblings () method section of jquery .
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=14449
For more information, refer to: http://www.softwhy.com/jquery/
Checbox check box to implement radio single-Box radio function
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
