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

根据多选框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. 观察效果