如何根据input的name和value判断选中复选框

答案:1 悬赏:80 手机版

解决时间 2021-02-27 12:21

提问者网友：临风不自傲
2021-02-26 23:17

最佳答案

五星知识达人网友：大漠
2021-02-27 00:53

根据多选框name来获得选中的值可用如下 jquery代码实现 1 2 3 $("input:checkbox[name='test']:checked").each(function() { // 遍历name=test的多选框 $(this).val(); // 每一个被选中项的值 }); 实例演示：给出两组多选框，点击按钮后分别获得两组中被选择的项目 示例代码如下 创建Html元素 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <div class="box"> 请输入用户名，限定字母、数字或下划线的组合： <div class="content"> 水果： <input type="checkbox" name="fruit" value="梨子"/>梨子 <input type="checkbox" name="fruit" value="李子"/>李子 <input type="checkbox" name="fruit" value="栗子"/>栗子 <input type="checkbox" name="fruit" value="荔枝"/>荔枝 蔬菜： <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> 设置css样式 1 2 3 4 5 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代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $(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); }); })

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息