欢迎您, 来到 宁时修博客.^_^

jQuery最简单的全选/反选效果(附上常用的方法)

2017/09/21 宁时修 Jquery,javascript 926
jQuery最简单的全选/反选效果(附上常用的方法)

额,你是不是觉得封面图和内容极其不搭!是的,因为图片我是随便找的!QQ图片20170921180018.jpg

好了,回到正题!闲话就说到这啦 …………

项目开发中,全选和反选用的频率还是蛮高的,下面就来介绍下如何才能实现该功能!

html代码:

<input type="checkbox" id="check-all">全选
<div id="check-box">
        <input type="checkbox" name="ids[]" value="1">张学友<br/>
        <input type="checkbox" name="ids[]" value="2">刘德华<br/>
        <input type="checkbox" name="ids[]" value="3">郭富城<br/>
        <input type="checkbox" name="ids[]" value="4">哈哈<br/>
</div>

javascript代码:

注意:我用的JQuery,你需要在html中引入它
$("#check-all").on('click',function(){
   var _is_opt = $(this).is(":checked");
   if (_is_opt) {
       // 全选
       $("#check-box :checkbox").prop("checked", true);
    } else {
        // 全不选
        $("#check-box :checkbox").prop("checked", false);
   }
 });
prop() 是设置属性的方法(可设置多个属性和属性值)
is() 是用来检测元素的集合 返回值是Bool类型  存在时返回true 否则 返回 false


附上几个常用的Javascript方法

//  格式化当前时间
// 对Date的扩展,将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,
// 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
// 例子:
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
Date.prototype.Format = function (fmt) { //author: meizz
     var o = {
       "M+": this.getMonth() + 1, //月份
       "d+": this.getDate(), //日
       "h+": this.getHours(), //小时
        "m+": this.getMinutes(), //分
        "s+": this.getSeconds(), //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
         "S": this.getMilliseconds() //毫秒
     };
     if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
     for (var k in o)
     if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
     return fmt;
 };
    /**
     * 判断对象|数组 是否为空
     * @param  Array  obj
     * @return Bool
     */
    function isEmpty(obj) {
   // 本身为空直接返回true
    if (obj == null) return true;
    // 然后可以根据长度判断,在低版本的ie浏览器中无法这样判断。
    if (obj.length > 0)    return false;
    if (obj.length === 0)  return true;
    //最后通过属性长度判断。
    for (var key in obj) {
        if (hasOwnProperty.call(obj, key)) return false;
    }
    return true;
  }
    /**
     * 统计字数
     * @param  字符串
     * @return 数组[当前字数, 最大字数]
     */
    function check (str) {
        var num = [0, 200];
        for (var i=0; i<str.length; i++) {
            //字符串不是中文时
            if (str.charCodeAt(i) >= 0 && str.charCodeAt(i) <= 255){
                num[0] = num[0] + 0.5;//当前字数增加0.5个
                num[1] = num[1] + 0.5;//最大输入字数增加0.5个
            } else {//字符串是中文时
                num[0]++;//当前字数增加1个
            }
        }
        return num;
    }
    
     /**
     * 清除数组对象中的指定元素
     * @param  arr 数组|对象  原有数组
     * @param  val 字符串    需要移除的值
     * @return 数组[移除的后新对象|数组]
     */
    function removeArrayByValue(arr, val) {
        for(var i=0; i < arr.length; i++) {
            if(arr[i] == val) {
                arr.splice(i, 1);
                break;
            }
        }
        return arr;
    }
    
    // 获取被选中的值
    function getCheckVel(){
      obj = $(".shop_list_right .cp_sku_id");
      check_val = [];
      for(k in obj){
        if(obj[k].checked)
          check_val.push(obj[k].value);
      }
      return check_val;
    }
    
    // 获取JSON对象的长度
    // 类似于这种数据 var json2={"name":"txt1","name2":"txt2"};
    function getJsonLength(jsonData){
       var jsonLength = 0;
       for(var item in jsonData){
          jsonLength++;
       }
       return jsonLength;
    }
    
    // 控制只能输入数字并且最多允许两位小数点
    function clearNoNum(obj){
      //修复第一个字符是小数点 的情况.
      if(obj.value !=''&& obj.value.substr(0,1) == '.'){
        obj.value="";
      }
      obj.value = obj.value.replace(/^0*(0\.|[1-9])/, '$1');//解决 粘贴不生效
      obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符
      obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
      obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
      obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
      if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤,此处控制的是如果没有小数点,首位不能为类似于 01、02的金额
        if(obj.value.substr(0,1) == '0' && obj.value.length == 2){
         obj.value= obj.value.substr(1,obj.value.length);
        }
      }
     }
点赞
说说你的看法

所有评论: (2)

# 加入组织

1、用手机QQ扫左侧二维码

2、搜Q群:1058582137

3、点击 宁时修博客交流群