JQ 获取多个选择题的答案和总分传递后端

<div>
<input name="pointa" value="16" type="radio" />题目1答案a
<input name="pointa" value="18" type="radio" />题目1答案b
<input name="pointa" value="20" type="radio" />题目1答案c
<input name="pointa" value="12" type="radio" />题目1答案d
</div>

<div>
<input name="pointb" value="16" type="radio" />题目2答案a
<input name="pointb" value="20" type="radio" />题目2答案b
<input name="pointb" value="18" type="radio" />题目2答案c
<input name="pointb" value="12" type="radio" />题目2答案d
</div>

<div>
<input name="pointc" value="16" type="radio" />题目3答案a
<input name="pointc" value="20" type="radio" />题目3答案b
<input name="pointc" value="18" type="radio" />题目3答案c
<input name="pointc" value="12" type="radio" />题目3答案d
</div>

<!-- 引入JQ -->
<script>
//循环选中的答案,可以定义一个数组循环,我这里的name值是pointa,b,c所以定义个数组循环它;PS这种是不灵活的,后端的题目循环不要用这种定义数组方法;可以参考each循环
$("input").click(function(){
  var $_array = ['a','b','c'];//定义数组
  // 值相加
  var total = 0;//定义分数的初始值
  // 未选中问题点
  var _top = true;//定义答案是否都选中可以提交到后端
  // 返回数组未选中的坐标
  var $_index_ = [];//返回未选中的题目
  // 返回选择的题目
  var $data = {};//返回选中的题目然后提交给后端记录用户选了那些题,不能用[]定义,传给后端会收不了
  for (var arri=0;arri<$_array.length;arri++)
  {
    //查看元素选中的题,$_array[arri] 意思为 $_array是数组[0=>'a',1=>'b',2=>'c'];然后arri是坐标从0开始
    //这样解释为取出坐标的值 
    var point_val = $('input:radio[name='+"point"+$_array[arri]+']:checked').val();
    //这里判断哪个问题没有值,意思未被选中
    if(point_val==null){
      // console.log("请选中第"+arri+"问题");
      //把未取中的值加入素组;方便后面提示用户那些题没选
      $_index_.push(arri);
      _top = false;
    }else{
      //console.log('选中了'+$_array[arri]+'值为'+point_val)
      total = total+point_val*1;//总分
      $data[$_array[arri]] =  point_val;//选中的题目传给后端
                    
    }       
  }
  
  //判断是否可以传入后端
  if(_top ==false){
   
  }else{
    $.ajax({
      url:"index.php",
      data:{
       total:total,//总分
       topic:JSON.stringify($data)//选中的答案把字符串json改为json数据传递后端
                        
      },
      type: "POST",
      dataType: "JSON",
      //traditional: true,
      success:function(msg){
        
      },
      error:function(){
       alert('failed!');
      },
    });
  }

})
</script>

 

posted @ 2021-05-28 11:03  亚索会代码  阅读(73)  评论(0编辑  收藏  举报