jQuery获取混合radio、checkbox、text值-CSDN博客

本文链接：https://blog.csdn.net/u010926243/article/details/43016327

说明：首先我们不知道页面中有多少radio group、checkbox和text，但是这些HTML标签的name属性是按照一定规律的(可以通过遍历或循环逐个获取到)，而且这些标签的value属性值与它们的选项值相等。

代码：

<div class="question_content">
       <div class="question_list">
          <div class="question_title">1、你喜欢什么运动</div>
          <div>
             <ul class="question_item">
                 <li><input type="radio" name="question0" value="篮球">篮球</li>
                 <li><input type="radio" name="question0" value="足球">足球</li>
                 <li><input type="radio" name="question0" value="舞蹈">舞蹈</li>
             </ul>
          </div>
       </div>
       <div class="question_list">
          <div class="question_title">2、问题1</div>
          <div>
             <ul class="question_item">
                 <li><input type="checkbox" name="question1" value="选项选项1">选项选项1</li>
                 <li><input type="checkbox" name="question1" value="选项选项2">选项选项2</li>
                 <li><input type="checkbox" name="question1" value="选项选项3">选项选项3</li>
                 <li><input type="checkbox" name="question1" value="选项选项4">选项选项4</li>
             </ul>
          </div>
       </div>
       <div class="question_list">
           <div class="question_title">3、有什么意见或者建议</div>
           <div>
              <textarea rows="5" cols="35" maxlength="250" class="txt"></textarea>
           </div>
       </div>
   </div>
   <div class="question_btn">
              <input type="button" value="提交" class="question_btnOK" id="feedbackSubmit">
              <input type="button" value="取消" class="question_btnOK">
   </div>

上述代码效果是：

jQuery和javascript代码如下：

$('body').on('click','#feedbackSubmit',function(){           //在jQuery初始化时要绑定时间，on替代了bind，而且还可以对动态添加的HTML元素添加事件
       var len=$(".question_list").length;                           //jQuery选择集合
       var title="";
       var value=null;
       var option="";
       var content=new Array(len);                                     //将所有form表单值保存在数组中
       var clickFlag=true;                                                     //跳出阻止时间执行flag
       var flag=true;                                                              //跳出阻止时间执行flag
        var txtFlag=true;                                                       //跳出阻止时间执行flag
        $(".question_list").each(function(i){                                  //jQuery的each函数遍历                循环开始
            title=$(this).find("div:first").text();
            value=$(this).find("ul.question_item").find("input[name='question"+i+"']:checked");                      //jQuery find函数寻找符合条件的集合
            if(value !=null && value != undefined ){
                //单选
                if(value.length == 1){
                    option=";"+value.val();
                 }else if(value.length > 1){
                    //多选,可能有多个选项，则遍历取值
                    value.each(function(){
                         option+=";"+$(this).val();
                      });
                     //如果是文本,长度也为0,故设flag来区分文本
                 }else if(value.length <= 0){
                     flag=false;
                  }
            }
            //判断文本
            if(!flag){
                var txt=$(this).find("textarea");
                if(txt.length>0){
                    //实际上一个div下面只有一个textarea，不需要遍历，下面是为了兼容性
                     txt.each(function(j){
                        if($(this).val() == ""){
                             alert("不能为空");
                             txtFlag=false;
                             //跳出本次each
                             return false;
                         }
                     });
                     if(!txtFlag){
                         //跳出双each
                        clickFlag=false;
                        return false;
                     }
                     option+=";"+txt.val();
                }else{
                    alert("题"+(i+1)+"未选");                   //提示未选
                    clickFlag=false;
                    return false;
                 }
             }

             content[i]=title+option;
             //多选会叠加,防止叠加
             option="";
         });                  //循环结束
         //停止事件执行
         if(!clickFlag){
             return;                                           //如果有form表单元素没有选填，则停止事件执行
         }

alert(content.toString); //弹出对话框

下面是CSS样式表：

.question_list{
   width:100%;
   display:block;
   position:relative;
   float:left;
}
.question_list div{
   width:100%;
   display:block;
   position:relative;
   float:left;
}
.question_item{
   padding-left:1em;
   list-style-type: none;
   line-height:1.2em;
   height: 1.2em;
   margin:0;
   font-size:0.9em;
}
.question_btn{
   margin-top:10px;
   width:100%;
}
.question_btnOK{
   width:45%;
   height:35px;
   line-height:35px;
   background:#3CDDE1;
}

以上代码在JSP页面，jQuery mobile HTML页面中都测试过，jQuery库版本是1.9.1，可能低版本中没有on事件，但是添加普通的onclick事件就行了。代码上只遍历获取一个radio、checkbox、text的值，但是都适用于多个，已测试通过，如果想遍历其它的form标签元素，可以自行修改代码。