js checkbox获取选中的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*设置css样式*/ div.box { width: 300px; padding: 20px; margin: 20px; border: 4px dashed #ccc; } div.box span { color: #999; font-style: italic; } div.content { width: 250px; margin: 10px 0; padding: 20px; border: 2px solid #ff6666; } input[type='checkbox'] { margin: 5px; } input[type='button'] { height: 30px; margin: 10px; padding: 5px 10px; } /*编写jquery代码*/ </style> <script src="../jquery/jquery.min.js"></script> <script> $(function() { // 设置属性值 $("input:button").click(function() { var fruit = ""; var vegetable = ""; $("input:checkbox[name='fruit']:checked").each(function() { fruit += $(this).val() + " "; }); $("input:checkbox[name='vegetable']:checked").each(function() { vegetable += $(this).val() + " "; }); alert("已选择水果:" + fruit + ",已选择蔬菜:" + vegetable); }); }) </script> </head> <body> <div class="box"> <span>请输入用户名,限定字母、数字或下划线的组合:</span> <br> <div class="content"> <span>水果:</span> <br> <input type="checkbox" name="fruit" value="梨子" />梨子 <input type="checkbox" name="fruit" value="李子" />李子 <input type="checkbox" name="fruit" value="栗子" />栗子 <input type="checkbox" name="fruit" value="荔枝" />荔枝 <br> <span>蔬菜:</span> <br> <input type="checkbox" name="vegetable" value="青菜" />青菜 <input type="checkbox" name="vegetable" value="萝卜" />萝卜 <input type="checkbox" name="vegetable" value="土豆" />土豆 <input type="checkbox" name="vegetable" value="茄子" />茄子 </div> <input type="button" value="提交"> </div> </body> </html>