关于使用jquery取得页面中选中的checkbox的实现

 

在页面中想要获取checkbox中的选中的值，然后封装成数组，放到json中，

页面：

Html代码 

1. 用户名：<input type="text" id="username" /><br />  
2. 密码 ：<input type="password" id="password" /><br />  
3. 确认密码 ：<input type="password" id="repassword" /><br />  
4. 年龄  ：<input type="text" id="age" /><br />  
5. 衣服 ：<input type="checkbox" value="green" />绿色    
6. <input type="checkbox" value="red"  /> 红色<br />  
7. <input type="button" value="提交" id="submit" />  

用户名：<input type="text" id="username" /><br />密码 ：<input type="password" id="password" /><br />确认密码 ：<input type="password" id="repassword" /><br />年龄  ：<input type="text" id="age" /><br />衣服 ：<input type="checkbox" value="green" />绿色 <input type="checkbox" value="red"  /> 红色<br /><input type="button" value="提交" id="submit" />

js代码：

Javascript代码 

1. $("document").ready(   
2.     function (){   
3.         $("#submit").click(checksubmit);   
4.     }   
5. );   
6.   
7. function checksubmit(){   
8.     var cloth = [];   
9.     var checked = $("input:checked");   
10.     for(var i=0;i<checked.length;i++){   
11.         cloth[i] = checked[i].value;   
12.     }   
13.     var json = {   
14.     "username":encode($("#username").val()),   
15.     "password":$("#password").val(),   
16.     "repassword":$("#repassword").val(),   
17.     "age":$("#age").val(),   
18.     "cloth":cloth   
19.     };   
20.     $.get("JSONTest",json,callback);   
21. }   
22.   
23. function callback(data){   
24.     alert(data);   
25. }   
26.   
27. function encode(data){   
28.     return encodeURI(encodeURI(data));   
29. }  

$("document").ready(function (){$("#submit").click(checksubmit);});function checksubmit(){var cloth = [];var checked = $("input:checked");for(var i=0;i<checked.length;i++){cloth[i] = checked[i].value;}var json = {"username":encode($("#username").val()),"password":$("#password").val(),"repassword":$("#repassword").val(),"age":$("#age").val(),"cloth":cloth};$.get("JSONTest",json,callback);}function callback(data){alert(data);}function encode(data){return encodeURI(encodeURI(data));}

中间遇到的问题主要是怎么把checked这个数组中的值取出来 ，通过alert，我们可以知道 checked.get(0)返回的是一个HTMLINPUTELEMENT对象，因此此时，已经是一个dom对象了，可以直接通过value这个属性来取出对应的属性值