web►js

jQuery应用杂记

文章目录

  1. 1. 全选
  2. 2. 获取选择内容
  3. 3. 全选和其他选项不能同时选中
  4. 4. 重置表单
  5. 5. select选择显示隐藏相关元素
  6. 6. 输入框字数检测

** 工作中常用的一些代码片段 **

全选

1
2
3
4
5
6
7
8
9
$("#ckAll").click(function() {
    $("input[name='sub']").prop("checked", this.checked);
  });
  //全部checkbox选中后 全选框也选中

  $("input[name='sub']").click(function() {
    var $subs = $("input[name='sub']");
    $("#ckAll").prop("checked" , $subs.length == $subs.filter(":checked").length ? true :false);
  });

获取选择内容

1
2
3
4
5
6
var uids = $('[name=subCk]:checked')
          .map(function () {
              return $(this).data('id');
          })
          .get()
          .join();

全选和其他选项不能同时选中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
	/*
	 *@ckName checkbox-name
	 *@i 对应index
	*/
	function checkToggle(ckName,i){
	    if(arguments.length==1){
	        i=0;
	    }
	    $("[name='"+ckName+"']:eq("+i+")").change(function () {
	        if ($(this).prop('checked')) {
	            $(this).parent().nextAll().children().prop('checked', false);
	        }
	    });
	    $("[name='"+ckName+"']").not(":eq("+i+")").change(function () {
	        if ($(this).prop('checked')) {
	            $("[name='"+ckName+"']:eq("+i+")").prop('checked', false);
	        }
	    });
	}
## 切换条数

	 var pageData={
	     limit:<?=$limit;?>
	 };
	 $("[value="+pageData.limit+"]:radio").prop('checked','true');
	    $('[name=limit]:radio').change(function(){
	        var limit=$(this).val();
	        if(parseInt(limit)<10){
	            return;
	        }
	        if(location.search.indexOf('limit=')!==-1){
	            location.search=location.search.replace(/limit=(\d*)?/,'limit='+limit);
	        }else{
	            console.log((location.search=='')?'limit='+limit:'&limit='+limit);
	            location.search=(location.search=='')?'limit='+limit:location.search+'&limit='+limit;
	        }
	});

重置表单

jQuery中没有重置表单的方法,如果需要，可以使用Dom的reset方法

1
$('#myform')[0].reset()

select选择显示隐藏相关元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
//选中与否select对应值，进行相应显示切换
var selectMap = {
        '#ddtype': {
            2: {show: 'input[name=deadline]', hide: ''}
        },
        '#aliasType': {
            1: {show: '.divAlias', hide: ''}
        },
        '#type': {
            2: {show: '#sceneId', hide: '.divExtra'}
        },
};
selectShow.register(selectMap);

//函数
var selectShow = {
    register: function (selectMap) {
        var me = this;
        for (var select in selectMap) {
            var _select = selectMap[select];
            (function (select, _select) {
                $(select).change(function () {
                    for (var option in _select) {
                        if ($(this).val() == option) {
                            me.toggle(_select[option]['show'], _select[option]['hide'])
                        } else {
                            me.toggle(_select[option]['hide'], _select[option]['show'])
                        }
                    }
                });
                $(select).change();
            })(select, _select);//闭包注册
        }
    },
    toggle: function (show, hide) {
        if (show != '') {
            $(show).removeClass('hide');
        }
        if (hide != '') {
            $(hide).addClass('hide');
        }
    }
};

输入框字数检测

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<textarea id="msg" name="msg" cols="40" rows="4" data-max-len="50" placeholder="内容字数不超过50个字"></textarea>
还可输入<span id="showLeft">50</span>字

//注册
$(document).on('keyup', '#msg', function () {
		_maxlen.isMax('#msg', '#showLeft');
}).focus(function () {
		_maxlen.disabledRightMouse();
}).blur(function () {
		_maxlen.enabledRightMouse();
});


/*
 *监控输入字数
 * content:textarea[data-max-len] 输入框
 * container:span 显示剩余字数
 * */
var _maxlen = {
    isMax: function (content, container) {
        var textarea = (typeof content == 'string') && content.constructor == String ? $(content) : content;
        container = (typeof container == 'string') && container.constructor == String ? $(container) : container;
        var max_length = parseInt(textarea.data('max-len'));
        var _val = $.trim(textarea.val());
        var _leftLen = max_length;
        if (twttr.txt.getTweetLength(_val) > max_length) {
            textarea.val(_val.substring(0, max_length));
            _leftLen = 0;
        } else {
            _leftLen = max_length - twttr.txt.getTweetLength(textarea.val());
        }
        container.text(_leftLen);
    },
    disabledRightMouse: function () {
        document.oncontextmenu = function () {
            return false;
        }
    },
    enabledRightMouse: function () {
        document.oncontextmenu = null;
    }
};
如有疑问，请文末留言交流或邮件：newbvirgil@gmail.com 本文链接 : https://newbmiao.github.io/2015/10/25/jQuery-code-record.html