jquery如何根据多选框name来获得选中的值。

Posted 2020-12-25 jierong12

根据多选框name来获得选中的值可用如下 jquery代码实现

1 2 3

$("input:checkbox[name=‘test‘]:checked").each(function() { // 遍历name=test的多选框   $(this).val();  // 每一个被选中项的值 });

实例演示：给出两组多选框，点击按钮后分别获得两组中被选择的项目

示例代码如下

1. 创建Html元素

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   <div class="box">     <span>请输入用户名，限定字母、数字或下划线的组合：</span>     <div class="content">         <span>水果：</span>         <input type="checkbox" name="fruit" value="梨子"/>梨子         <input type="checkbox" name="fruit" value="李子"/>李子         <input type="checkbox" name="fruit" value="栗子"/>栗子         <input type="checkbox" name="fruit" value="荔枝"/>荔枝         <span>蔬菜：</span>         <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>

2. 设置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;}

3. 编写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);                   }); })

4. 观察效果