Home > Developer > Web Develop
Radio and checkbox and select, it is the front and back of the use of the Three Musketeers Ah! In particular the checkbox and select, about these two do not speak today, because in the following articles, I have more detailed explanation.
SPRINGMVC Ajax+select The common way of the dropdown box interaction
CheckBox selected and passed through Ajax array to background receive
About CheckBox Auto-check
Today, the main explanation is radio.
Radio application, the main application is a single box, the actual application is also very wide, such as gender, identity authentication (enterprise or individual), state and so on.
Or the same as the usual, code example explained.
1. How do I get the value of radio?
var Isdefaultplan = $ ("input[name= ' Isdefaultplan ']:checked"). Val ();The value of the selected radio can be obtained from the above code
2.radio How do I assign and select a value?
if (data.resourcerateplan.isdefault==1) { $ (' input:radio[name=isdefaultplan][value= "1"] '). attr ("Checked", true); } else{ $ (' input:radio[name=isdefaultplan][value= ' 0 "] '). attr (" Checked ", true); When the value of status is 1 o'clock, the equivalent is the off state if (data.resourcerateplan.status==1) { $ (' input:radio[name=status][value= "1"] '). attr ("Checked", true); } else{ $ (' input:radio[name=status][value= ' 0 "] '). attr (" Checked ", true); The above code can be implemented
The actual use of more than the main is to take value and assignment.
A conclusion from the above two examples is that both the jquery selector or the relevant JS judgment are used to achieve the value and assignment.
jquery itself is the encapsulation of JS. The purpose of jquery has always been the same sentence: write less and do more.
The jquery tutorial can be consulted: https://www.runoob.com/jquery/jquery-tutorial.html
In addition, I usually write blog posts and prefer to emphasize the basics and principles.
Enter below without jquery implementations to get the radio value, the JS and HTML code examples are as follows:
<HTML> <Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"> <title>Test</title> <Script> functionCheck_radio () {varChkobjs=Document.getelementsbyname ("Radio"); for(varI=0; I<Chkobjs.length;i++){ if(chkobjs[i].checked) {alert (chkobjs[i].value); Break; } } } </Script> </Head> <Body> <formAction= ' 'Method= ' Post 'onsubmit= ' Javascript:returnCheck_radio () '> <inputtype= ' Radio 'value= ' 1 'name= ' Radio '>A<inputtype= ' Radio 'value= ' 2 'name= ' Radio '>B<inputtype= ' Radio 'value= ' 3 'name= ' Radio '>C<inputtype= ' Radio 'value= ' 4 'name= ' Radio '>D<inputtype= ' Radio 'value= ' 5 'name= ' Radio '>E<inputtype=submitvalue=sub> </form> </Body></HTML>
Summary: Understand good JavaScript, for jquery will be better understanding, perhaps later can be like the virtuous heart comrade, write a Layui front-end framework. Of course, the framework is not so well written, but the essence of the framework is the basic version of the upgrade.
Application Example of JS Radio
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
