FEX

让web开发更迅速、简单。

您的位置：首页 - 经验总结列表 - 经验总结详情

input表单各种取值

2017-01-13 10:39:12

1、单选
  •  
性别：   
 
 
判断为空
if( parseInt($("input[name='sex']:checked").length) ==0 ){
    alert("请选择性别！");
    return false;
   }
取值
sex: $("input[name=sex]:checked").attr("attr-val"),
 
2、select选项
 
 
$("#address").find("option:selected").attr("data-add")
 
 
3、多选
 

6、您玩过以下哪些大型角色扮演游戏？（多选）*

                   

 

                       
                       
                       
                       
                       
                       
                       
                       
                       
                       
                       
                   

 

 
4、checked 判断checked是否选中 
DOM: 我已看过并同意
 
jquery判断checked的三种方法:
.attr('checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'): //16+:true/false
.is(':checked'):    //所有版本:true/false//别忘记冒号哦
jquery赋值checked的几种写法:
所有的jquery版本都可以这样赋值:
// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);
jquery1.6+:prop的4种赋值:
// $("#cb1″).prop("checked",true);//很简单就不说了哦
// $("#cb1″).prop({checked:true}); //map键值对
// $("#cb1″).prop("checked",function(){
return true;//函数返回true或false
});
//记得还有这种哦:$("#cb1″).prop("checked","checked");
 
模块：
 more_info:function($style){
  var that=this;
  $("input[name="+ $style +"]").each(function(i, d){
   if(d.checked){
    that[$style+"_temp"].push(d.value);
   }
  });
  if($("#" + $style +"12").is(":checked") && $("#" + $style +"_other").val() != ""){
   that[$style+"_temp"].push($("#"+ $style +"_other").val());
  }
 },
 
 other_value:function($value,id){
  var that=this;
  that[$value+"_temp"] = $("input[name="+ $value +"]:checked").val()
  if($("#"+ $value + id).is(":checked") && $("#" + $value +"_other").val() != ""){
   that[$value+"_temp"] += $("#" + $value +"_other").val();
  }
 
 },
 
 
 
//玩过的游戏
    if( parseInt($("input[name='game']:checked").length) ==0 ){
     alert("请选择您玩过哪些游戏");
     return false;
    }
    that.more_info("game")

<div class="area">
        <p>
            还可以输入<b class="num">140</b>字</p>
        <textarea class="chackTextarea"></textarea>
    </div>

 
<script type="text/javascript">
    var txtobj = {
        divName: "area", //外层容器的class
        textareaName: "chackTextarea", //textarea的class
        numName: "num", //数字的class
        num: 140 //数字的最大数目
    }
    var textareaFn = function () {
        //定义变量
        var $onthis; //指向当前
        var $divname = txtobj.divName; //外层容器的class
        var $textareaName = txtobj.textareaName; //textarea的class
        var $numName = txtobj.numName; //数字的class
        var $num = txtobj.num; //数字的最大数目
        function isChinese(str) {  //判断是不是中文
            var reCh = /[u00-uff]/;
            return !reCh.test(str);
        }
        function numChange() {
            var strlen = 0; //初始定义长度为0
            var txtval = $.trim($onthis.val());
            for (var i = 0; i < txtval.length; i++) {
                if (isChinese(txtval.charAt(i)) == true) {
                    strlen = strlen + 2; //中文为2个字符
                } else {
                    strlen = strlen + 1; //英文一个字符
                }
            }
            strlen = Math.ceil(strlen / 2); //中英文相加除2取整数
            if ($num - strlen < 0) {
                $par.html("超出 " + Math.abs($num - strlen) + " 字"); //超出的样式
            }
            else {
                $par.html("还可以输入 " + ($num - strlen) + " 字"); //正常时候
            }
            $b.html($num - strlen);
        }
        $("." + $textareaName).live("focus", function () {
            $b = $(this).parents("." + $divname).find("." + $numName); //获取当前的数字
            $par = $b.parent();
            $onthis = $(this); //获取当前的textarea
            var setNum = setInterval(numChange, 500);
        });
    }
    textareaFn();
</script>