tofacebook.com -专业IT技术社区(贪吃蛇学院) 【百家号】脸书百科,jquery如何根据多选框name来获得选中的值。 Web程序 - 贪吃蛇学院-专业IT技术平台
70°

【百家号】脸书百科,jquery如何根据多选框name来获得选中的值。 Web程序

标签:height   3ds   this   img   ble   string   ali   tab   查看   

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

    技术分享图片

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

标签:height   3ds   this   img   ble   string   ali   tab   查看   

原文地址:https://www.cnblogs.com/jierong12/p/9361707.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: