Home > Developer > Web Develop
The code is as follows:
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd "><HTML><Head><Mce:style><!-- -</Mce:style><styleMce_bogus= "1"></style><title>JS Get check box is selected value</title></Head><Body><inputtype= "checkbox"name= "Test"value= "0" />0<inputtype= "checkbox"name= "Test"value= "1" />1<inputtype= "checkbox"name= "Test"value= "2" />2<inputtype= "checkbox"name= "Test"value= "3" />3<inputtype= "checkbox"name= "Test"value= "4" />4<inputtype= "checkbox"name= "Test"value= "5" />5<inputtype= "checkbox"name= "Test"value= "6" />6<inputtype= "checkbox"name= "Test"value= "7" />7<inputtype= "button"onclick= "chk ()"value= "Submit" /></Body></HTML
JS Code
functionchk () {varObj=document.getelementsbyname (' Test ');//Select all objects that Name= "' Test '" to return an array//after the object array is taken, we loop to detect whether it is selectedvarS= "; for(vari=0; i<obj.length; i++){if(obj[i].checked) s+=obj[i].value+ ', ';//If selected, adds value to the variable s}//so now to detect the value of S to know the value of the selected check boxAlert (s== '? ') You have not selected any content yet! ‘: s);}functionJqchk () {//jquery Gets the check box valuevarChk_value =[];$(' Input[name= ' test ']:checked '). each (function() {Chk_value.push ($ ( This). Val ());}); Alert (Chk_value.length==0? ' You have not selected any content yet! ‘: Chk_value);}
Several other actions on the checkbox
1. Select All
2. Deselect Select All
3. Select All Odd
4. Reverse Selection
5. Get all selected values
$ ("document"). Ready (function(){$("#btn1"). Click (function(){$("[Name= ' checkbox ']"). attr ("Checked", ' true ');//Select All})$("#btn2"). Click (function(){$("[Name= ' checkbox ']"). Removeattr ("checked");//Cancel Select all})$("#btn3"). Click (function(){$([name= ' checkbox ']:even '). attr ("Checked", ' true ');//Check all odd})$("#btn4"). Click (function(){$("[Name= ' checkbox ']"). each (function(){//Inverse Selectionif($( This). attr ("Checked")){$( This). Removeattr ("Checked");}Else{$( This). attr ("Checked", ' true ');}})}) $("#btn5"). Click (function(){//Output the selected valuevarStr= "";$("[name= ' checkbox '][checked]"). each (function() {str+=$( This). Val () + "/r/n";//alert (This). Val ());}) alert (str);})
HTML code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">//Select All})$("#btn2"). Click (function(){$("[Name= ' checkbox ']"). Removeattr ("checked");//Cancel Select all})$("#btn3"). Click (function(){$([name= ' checkbox ']:even '). attr ("Checked", ' true ');//Check all odd})$("#btn4"). Click (function(){$("[Name= ' checkbox ']"). each (function(){//Inverse Selectionif($( This). attr ("Checked")){$( This). Removeattr ("Checked");}Else{$( This). attr ("Checked", ' true ');}})}) $("#btn5"). Click (function(){//Output the selected valuevarStr= "";$("[name= ' checkbox '][checked]"). each (function() {str+=$( This). Val () + "/r/n";//alert (This). Val ());}) alert (str); })--></script>CheckBox1<input type= "checkbox" name= "checkbox" value= "CheckBox2" >CheckBox2<input type= "checkbox" name= "checkbox" value= "Checkbox3" >Checkbox3<input type= "checkbox" name= "checkbox" value= "Checkbox4" >checkbox4<input type= "checkbox" name= "checkbox" value= "CHECKBOX5" >checkbox5<input type= "checkbox" name= "checkbox" value= "checkbox6" >checkbox6</form></div></body></HTML>
JS Operation checkbox
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
