JQuery指南



复选框checkbox技巧

jQuery操作复选框checkbox技巧总结 — 设置选中、取消选中、获取被选中的值、判断是否选中等

checked属性定义

先了解下input标签的checked属性:

1、HTML checked 属性

◆ 定义和用法

checked 属性是一个布尔属性

checked 属性规定在页面加载时应该被预先选定的 元素。

checked 属性适用于

checked 属性也可以在页面加载后,通过 JavaScript 代码进行设置。

checked属性的用法

注意:操作checked、disabled、selected属性,强制建议只用prop()方法!!,不要用attr()方法。如需移除属性,请使用 removeProp() 方法。

1、jQuery判断checked是否是选中状态的三种方法:

1
2
3
4
5
.attr('checked') // 返回:"checked"或"undefined" ;

.prop('checked') // 返回true/false

.is(':checked') // 返回true/false //别忘记冒号哦

2、jQuery赋值checked的几种写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$("#cb1").attr("checked","checked"); //通用做法,现在不推荐了

$("#cb1").attr("checked",true); //不标准,不推荐了

$("#cb1").attr("checked","true"); //不标准,不推荐了
------------------------------------------
jQuery的prop()的4种赋值(推荐如下写法):

$("#cb1").prop("checked",true); //标准写法,推荐!

$("#cb1").prop({checked:true}); //map键值对    

$("#cb1").prop("checked",function(){
    return true;//函数返回true或false
});

转载于CSDN博主-有范管理美学

标签中checked=”checked”已有,但却不显示打勾的解决办法

1
2
3
4
5
6
7
8
9
10
11
12
13
function check(id,check{        

    if (check) {                

        $("." + id).find("input[type='checkbox']").prop("checked"true);        

    } else {                

        $("." + id).find("input[type='checkbox']").prop("checked"false);        

    }

}

jQuery操作checkbox技巧总结

1、获取单个checkbox选中项的值(三种写法)

1
2
3
4
5
6
7
8
9
$("#chx1").find("input:checkbox:checked").val()

//或者

$("#chx1").find("input:[type='checkbox']:checked").val();

//或者

$("#chx1").find("input:[name='ck']:checked").val();

2、 获取多个checkbox选中项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$("#chk1").find('input:checkbox').each(function({ //遍历所有复选框

    if ($(this).prop('checked') == true) {

        console.log($(this).val()); //打印当前选中的复选框的值

    }

});

function getCheckBoxVal()//jquery获取所有选中的复选框的值 

    var chk_value =[]; 

    $("#chk1").find('input[name="test"]:checked').each(function()//遍历,将所有选中的值放到数组中

        chk_value.push($(this).val()); 

    }); 

    alert(chk_value.length==0 ?'你还没有选择任何内容!':chk_value); 

}

3、 设置第一个checkbox 为选中值

1
2
3
4
5
$("#chk1").find('input:checkbox:first').prop("checked",true);

//或者

$("#chk1").find('input:checkbox').eq(0).prop("checked",true);

4、设置最后一个checkbox为选中值

1
$("#chk1").find('input:checkbox:last').prop("checked",true);

5、根据索引值设置任意一个checkbox为选中值

1
2
3
4
5
6
7
//从索引0开始(包含),到索引2(不包含)的checkbox

$("#chk1").find('input:checkbox').eq(索引值).prop('checked'true);  
//索引值=0,1,2.... 
//或者
$("#chk1").find('input:checkbox').slice(1,2).prop('checked'true);
//同时选中第0个和第1个checkbox

6、根据value值设置checkbox为选中值

1
2
3
$("#chk1").find("input:checkbox[value='1']").prop('checked',true);

$("#chk1").find("input[type='checkbox'][value='1']").prop('checked',true);

7、删除checkbox:①删除value=1的checkbox ②删除第几个checkbox

1
2
3
4
5
6
7
8
$("#chk1").find("input:checkbox[value='1']").remove(); //将匹配元素从DOM中删除,将标签从页面上删除了


$("#chk1").find("input:checkbox").eq(index).remove(); //索引值 index=0,1,2....

//如删除第3个checkbox:

$("#chk1").find("input:checkbox").eq(2).remove();

8、全部选中或全部取消选中

1
2
3
4
5
6
7
8
9
10
11
12
13
$("#chk1").find('input:checkbox').each(function({

    $(this).prop('checked'true);

});

//或者

$("#chk1").find('input:checkbox').each(function ({

    $(this).prop('checked',false);

});

9、选中所有奇数项或偶数项

1
2
3
$("#chk1").find("input[type='checkbox']:even").prop("checked",true); //选中所有偶数 

$("#chk1").find("input[type='checkbox']:odd").prop("checked",true); //选中所有奇数

10、反选

方法一:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$("#btn4").click(function()

    $("input[type='checkbox']").each(function()//反选 

         if($(this).prop("checked")){ 

             $(this).prop("checked",false); 

          } else

             $(this).prop("checked",true); 

         } 

    });    

});

方法二:

1
2
3
4
5
6
7
8
9
10
11
$("#btn4").on('click',function()

//反选所有的复选框(没选中的改为选中,选中的改为取消选中)

    $("#chk1").find("input[type='checkbox']").prop("checked"function(index, oldValue){

        return !oldValue;

    });

}

Jquery Validate相关参数及常用的自定义验证规则

一、官网地址: http://bassistance.de/jquery-plugins/jquery-plugin-validation

二、默认校验规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
required:true               必输字段
remote:"remote-valid.jsp" 使用ajax方法调用remote-valid.jsp验证输入值
email:true 必须输入正确格式的电子邮件
url:true 必须输入正确格式的网址
date:true 必须输入正确格式的日期,日期校验ie6出错,慎用
dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-231998/01/22 只验证格式,不验证有效性
number:true 必须输入合法的数字(负数,小数)
digits:true 必须输入整数
creditcard:true 必须输入合法的信用卡号
equalTo:"#password" 输入值必须和#password相同
accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
minlength:10 输入长度最小是10的字符串(汉字算一个字符)
rangelength:[5,10] 输入长度必须介于 510 之间的字符串")(汉字算一个字符)
range:[5,10] 输入值必须介于 5 和 10 之间
max:5 输入值不能大于5
min:10 输入值不能小于10

三、默认的提示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
},

示例:

1
2
3
.error[generated='true'] {
color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$("#fm").validate({
rules:{
loginpwd:{
required:true,
minlength:6,
maxlength:12
}
},
messages:{
loginpwd:{
required: "请输入密码",
minlength: "密码长度不能小于 6 个字母",
maxlength: "密码长度不能大于 12 个字母"
}
  }
});

remote远程验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
remote: {
url: '/paral/project/validProjectcode.do',
type: 'post',
dataType: "json",
data: {
"project.projectcode": function () {
return $("[name='project.projectCode1']").val() + "-" + $("[name='project.projectCode2']").val() + "-" + $("[name='project.projectCode3']").val() + "-" + $("[name='project.projectCode4']").val() + "-" + $("[name='project.projectCode5']").val();
}
}
}


public boolean verifyProjectcode(@RequestParam(value = "projectcode",defaultValue = "") String projectcode){
if(StringUtils.isNotEmpty(projectcode)) {
return projectService.verifyProjectcode(projectcode);
}
return false;
}

messages:{
projectcode:{
remote: '工程编码已经存在'
}
}

四、Jquery Validate 自定义验证规则

1
2
3
4
5
6
7
addMethod(name,method,message)方法
----------------------------------------------
参数 name 是添加的方法的名字。

参数 method 是一个函数,接收三个参数 (value,element,param) 。

value 是元素的值,element 是元素本身,param 是参数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 推荐:方式一,单个校验提示
jQuery.validator.addMethod("checkInput", function (value, element) {
var reg = /^(\-|\+)?\d+(\.\d+)?$/;
return reg.test(value);
}, "不允许输入字母")

// 方式二,不仅校验特殊字符及空格
jQuery.validator.addMethod("checkInput", function(value, element) {
var pattern = new RegExp("[.`~!@#$^&*=|{}':;',\\[\\]<>《》/?~!@#¥……&*|{}【】‘;:”“'。,、?' ']");
var reg = /^([0-9]+)$/;
if(pattern.test(value)) {
// 不都是数字即拦截,false
return false;
} else if(value.indexOf(" ") != -1){
// 如果要检索的字符串值没有出现,则该方法返回 -1。
return false;
} else {
// 放行
return true;
}
}, "禁止输入特殊字符及空格");
1
2
3
4
5
6
7
8
9
10
11
// $("#fm").validate({})中检验
rules: {
roleName: {
checkInput: true
}
},
messages: {
roleName: {
checkInput: "禁止输入特殊字符及空格"
}
}

注意: 如果有多个检验提示时,注意先后顺序,会有提示的优先级别。

1
2
3
4
5
// 先调用checkInput检验是否有特殊字符,没有的话再maxlength检验长度是否符合,依次进行...
"totalMoney": {required: true, checkInput: true, maxlength: 14, min: 0},

// 先调用maxlength检验长度是否符合,再看checkInput检验是否有特殊字符,依次进行...
"totalMoney": {required: true, maxlength: 14, checkInput: true, min: 0},

参考链接-CSDN博主「瓜皮猫咪」
参考链接-博客园「king西阳」

打赏
  • 版权声明: 本网站所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020-2021 Lauy    湘ICP备20003709号-1

请我喝杯咖啡吧~

支付宝
微信