Radio/multiple selection/dropdown box

Source: Internet
Author: User

In the development of the web will often contact the radio and multiple selection, so I think there must be a summary of this: Use JS to determine the check box//number of not selected <input type= "checkbox" Name= "CheckBox1" checked> <input type= "checkbox" Name= "CheckBox1" > <input type= "checkbox" Name= "CheckBox1" checked> <input " CheckBox "Name=" CheckBox1 "> <input type=" checkbox "Name=" CheckBox1 "> <script language=javascript> Fu Nction Check (obj) {for (I=0;i<document.all (obj). length;i++) {if (!document.all (obj) [i].checked) alert ("First" + (i +1) + "No Selection"}} <input Type=button onclick= "Check (' CheckBox1 ')" value= "detect" >//One has not selected <input type= "check Box "name=" Test "> <input type=" checkbox "name=" Test "> <input type=" checkbox "name=" Test "> <input t ype= "checkbox" name= "Test" > <input type= "checkbox" name= "Test" > <script language= "JavaScript" > Functi  
On check (obj) {for (I=0;i<document.all (obj). length;i++) {if (document.all (obj) (i)-checked) {return; } window.alert (' One is not selected.  
'); }  
</Script> <input Type=button onclick= check (' Test '); "value= detect" >//Number not selected <input type= "checkbox" NA Me= "CheckBox1" checked> <input type= "checkbox" Name= "CheckBox1" > <input type= "checkbox" Name= "CheckBox1" checked> <input type= "checkbox" Name= "CheckBox1" > <input type= "checkbox" Name= "CheckBox1" > &LT;MCE: Script language=javascript><!--function check (obj) {for i=0;i<document.all (obj). length;i++) {if (! document.all (obj) [i].checked] Alert ("First" + (i+1) + "not selected")} <input Type=button onclick= "Check (' CheckBox1 ')" value= " Detection ">//One also did not select <input type=" checkbox "name=" Test "> <input type=" checkbox "name=" Test "> <input type=" CheckBox "Name=" Test > <input type= "checkbox" name= "Test" > <input type= "checkbox" name= "Test" > < Script language= "JavaScript" > Function check (obj) {for (I=0;i<document.all (obj). length;i++) {if document.all (
obj) (i). checked) {return;}} Window.alert (' one has no choice.
'); } </Script>; input Type=button onclick= check (' Test '); "Value= detection > Radio buttons and checkboxes similar to the fact that there are many uses of jquery to operate in actual development, it's much easier to use jquery,
The following section is quoted from the blog park below the jquery code query1.4 version. Radio 1. Gets the selected value, three methods can be: $ (' input:radio:checked '). Val (); $ ("Input[type=

' Radio ']:checked '). Val ();

$ ("Input[name= ' rd ']:checked"). Val ();

2. Set the first radio to the selected value: $ (' Input:radio:first '). attr (' checked ', ' checked ');

or $ (' Input:radio:first '). attr (' checked ', ' true '); Note: attr ("Checked", ' checked ') = attr ("Checked", "true") = attr ("Checked", true) 3. Set the last radio to the selected value: $ (' input:radio:last ')

. attr (' checked ', ' checked ');

or $ (' input:radio:last '). attr (' checked ', ' true ');

4. Set any one radio to the selected value based on the index value: $ (' Input:radio '). EQ (index value). attr (' checked ', ' true '); index value =0,1,2 ....

or $ (' Input:radio '). Slice (1,2). attr (' checked ', ' true ');

5. Set radio to the value of $ ("input:radio[value= ' Rd2 ')" according to value. attr (' checked ', ' true ');

or $ ("input[value= ' Rd2 ']"). attr (' checked ', ' true '); 6. Delete Radio $ ("input:radio[value= ' Rd2 ') with value Rd2"). Remove ();

7. Delete the first few radio $ ("Input:radio"). EQ (index value). Remove (); index value =0,1,2 ....

such as delete 3rd radio:$ ("Input:radio"). EQ (2). Remove ();

8. Traverse Radio $ (' Input:radio '). each (function (Index,domele) {//write code});   DropDownList 1.

     Get checked: Gets the value of the selected item: $ (' Select#sel option:selected '). Val ();

or $ (' Select#sel '). Find (' option:selected '). Val ();

     Gets the text value of the selected item: $ (' select#seloption:selected '). Text ();

or $ (' Select#sel '). Find (' option:selected '). Text ();

2. Gets the index value of the currently selected item: $ (' Select#sel '). Get (0). SelectedIndex;   3. Get the maximum index value for the current option: $ (' Select#sel option:last '). attr ("index") 4.

Get the length of the DropDownList: $ (' Select#sel ') [0].options.length;

or $ (' Select#sel '). Get (0). Options.length;

5. Set the first option to the selected value: $ (' Select#sel option:first '). attr (' selected ', ' true ') or $ (' Select#sel ') [0].selectedindex = 0;   6. Set the last option to the selected value: $ (' Select#sel option:last). attr (' selected ', ' true ') 7.

Set any option to the selected value based on the index value: $ (' Select#sel ') [0].selectedindex = index value; index value =0,1,2 .... 8. Set the VALUE=4 option toChecked value: $ (' Select#sel '). attr (' Value ', ' 4 ');

or $ ("Select#sel option[value= ' 4 ']"). attr (' selected ', ' true ');

9. Option to delete value=3: $ ("Select#sel option[value= ' 3 ']"). Remove ();

10. Delete a few option: $ ("Select#sel option"). EQ (index value). Remove (); index value =0,1,2 ....

such as delete 3rd radio: $ ("Select#sel option"). EQ (2). Remove ();

11. Delete the first option: $ ("Select#sel option"). EQ (0). Remove ();

or $ ("Select#sel Option:first"). Remove ();
12. Delete the last option: $ ("Select#sel option:last"). Remove ();

13. Delete DropDownList: $ ("Select#sel"). Remove ();
14. After the Select, add an option: $ ("Select#sel"). Append ("<option value= ' 6 ' >f</option>");
15. Before select, add an option: $ ("Select#sel"). Prepend ("<option value= ' 0 ' >0</option>");

16. Traversal option: $ (' select#sel option '). each (function (index, Domele) {//write code});   CheckBox 1.

Gets a single checkbox check (three ways): $ ("input:checkbox:checked"). Val () or $ ("input:[type= ' checkbox ']:checked"). Val ();

or $ ("input:[name= ' ck ']:checked"). Val (); 2. Get multiple checkbox checked items: $ (' Input:checkbox ').each (function () {if ($ (). attr (' checked ') ==true) {alert ($ (this). Val ());

}

        });

3. Set the first checkbox to the selected value: $ (' Input:checkbox:first '). attr ("Checked", ' checked ');

or $ (' Input:checkbox '). EQ (0). attr ("Checked", ' true ');

4. Set the last checkbox to the selected value: $ (' Input:radio:last '). attr (' checked ', ' checked ');

or $ (' input:radio:last '). attr (' checked ', ' true ');

5. Set any checkbox to a selected value based on the index value: $ (' Input:checkbox). EQ (index value). attr (' checked ', ' true '); index value =0,1,2 ....

or $ (' Input:radio '). Slice (1,2). attr (' checked ', ' true ');

6. Select multiple checkbox: Check both the 1th and 2nd checkbox: $ (' Input:radio '). Slice (0,2). attr (' checked ', ' true ');

7. Set checkbox to selected value based on value: $ ("input:checkbox[value= ' 1 ']"). attr (' checked ', ' true ');

8. Delete value=1 checkbox: $ ("input:checkbox[value= ' 1 ']"). Remove ();

9. Delete the first few checkbox: $ ("Input:checkbox"). EQ (index value). Remove (); index value =0,1,2 ....

For example, delete the 3rd checkbox: $ ("Input:checkbox"). EQ (2). Remove (); 10. Traverse checkbox: $ (' Input:checkbox '). each (function (index, DomELe) {//write code});

     11. Select all $ (' Input:checkbox '). each (function () {$ (this). attr (' checked ', true);

});

12. Deselect all: $ (' Input:checkbox '). each (the function () {$ (this). attr (' checked ', false);

}); There is also the use of struts tags, <s:select name= "Assuunit" id= "Assuunit" list= "#request. List" listkey= "Businessunitcode" listvalue= "Businessunitname" headerkey= "headervalue="----Please select the business unit----"onchange=" changehidenvalue (); ></s:select> <input type= "hidden" id= "Assuunitname" name= "Assuunitname" "value= when submitting a form, you can only get list in the background
     Key, and cannot commit the value of the ListValue.
     Existing requirements are submitted Listkey and ListValue at the same time, the solution is as follows: 1, in the OnChange event function of SELECT, get the text in option, that is, ListValue.
 2, then, write back to a hidden field in the form.   
Can be used: function Changehidenvalue () {var Obj=document.getelementbyid (' Assuunit '); var Index=obj.selectedindex;
Ordinal number, taking the ordinal number of the currently selected option var val = Obj.options[index].text if (document.getElementById (' Assuunit '). value!= ') {
document.getElementById (' Assuunitname '). Value=val; } to implement the..


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.