java多选框回显_多选框向后台传值,多选框的回显,对多选
框的各种操作
1.多选框的回显:
js:$(
function(){
var checkBoxAll =$("input[name^='checkbox_']");//获取前缀为checkbox_的所有多选框对象
var checkArray=${list};//获取多选框需要回显得对应的值集合
console.info("checkArray=",checkArray);
for(var i=0;i
//获取所有复选框对象的value属性,然后,⽤checkArray[i]和他们匹配,如果有,则说明他应被选中
$.each(checkBoxAll,function(j,checkbox){
/
/获取复选框的value属性
var checkValue=$(checkbox).val();
if(checkArray[i]==checkValue){
$(checkbox).attr("checked",true);
}
})
}
});
2.多选框往后台传值接收:
另附所有对多选框的操作(转载):
//注意: 操作checkbox的checked,disabled属性时jquery1.6以前版本⽤attr,1.6以上(包含)建议⽤prop
2
3 //1、根据id获取checkbox
4 $("#cbCheckbox1");
5
6 //2、获取所有的checkbox
7 $("input[type='checkbox']");//or
8 $("input[name='cb']");
9
10 //3、获取所有选中的checkbox
11 $("input:checkbox:checked");//or
12 $("input:[type='checkbox']:checked");//or
13 $("input[type='checkbox']:checked");//or
14 $("input:[name='ck']:checked");
15
16 //4、获取checkbox值
17 //⽤.val()即可,⽐如:
18 $("#cbCheckbox1").val();
19
20
21 //5、获取多个选中的checkbox值
22 var vals = [];
23 $('input:checkbox:checked').each(function (index, item) {
24 vals.push($(this).val());
25 });
26
27 //6、判断checkbox是否选中(jquery 1.6以前版本 ⽤ $(this).attr("checked"))
28 $("#cbCheckbox1").click(function () {
29 if ($(this).prop("checked")) {
30 alert("选中");
31 } else {
jquery的attr属性32 alert("没有选中");
33 }
34 });
35
36 //7、设置checkbox为选中状态
37 $('input:checkbox').attr("checked", 'checked');//or
38 $('input:checkbox').attr("checked", true);
39
40 //8、设置checkbox为不选中状态
41 $('input:checkbox').attr("checked", '');//or
42 $('input:checkbox').attr("checked", false);
43
44 //9、设置checkbox为禁⽤状态(jquery<1.6⽤attr,jquery>=1.6建议⽤prop)
45 $("input[type='checkbox']").attr("disabled", "disabled");//or
46 $("input[type='checkbox']").attr("disabled", true);//or
47 $("input[type='checkbox']").prop("disabled", true);//or
48 $("input[type='checkbox']").prop("disabled", "disabled");
49
50 //10、设置checkbox为启⽤状态(jquery<1.6⽤attr,jquery>=1.6建议⽤prop)
51 $("input[type='checkbox']").removeAttr("disabled");//or
52 $("input[type='checkbox']").attr("disabled", false);//or
53 $("input[type='checkbox']").prop("disabled", "");//or
54 $("input[type='checkbox']").prop("disabled", false);
1
2
3
4
5
6
7
jQuery操作checkbox
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 function fn_disabled() {
26 //$("input[type='checkbox']").attr("disabled", "disabled");
27 //$("input[type='checkbox']").attr("disabled", true);
28 $("input[type='checkbox']").prop("disabled", true);
29 // $("input[type='checkbox']").prop("disabled", "disabled");
30 }
31
32 function fn_enable() {
33 // $("input[type='checkbox']").removeAttr("disabled");
34 // $("input[type='checkbox']").attr("disabled", false);
35 // $("input[type='checkbox']").prop("disabled","");
36 $("input[type='checkbox']").prop("disabled", false);
37 }
38
39 //获取选中的 checkbox的值
40 function getCheckedValues() {
41 var arr = [];
42 $("input[type='checkbox']:checked").each(function (index, item) {//
43 arr.push($(this).val());
44 });
45 alert(arr);
46 }
47
48 function checkedSecond() {
49 // $("input[type='checkbox']:eq(1)").prop("checked", "checked");
50 $("input[type='checkbox']:eq(1)").prop("checked", true);
51 }
52
53 function uncheckedSecond() {
54 // $("input[type='checkbox']:eq(1)").prop("checked", "");
55 $("input[type='checkbox']:eq(1)").prop("checked", false);
56 }
57
58 $("#cbCheckbox1").click(function () {
59 if ($(this).prop("checked")) {//jquery 1.6以前版本 ⽤ $(this).attr("checked")
60 alert("选中");
61 } else {
62 alert("没有选中");
63 }
64 });
65
66 HTML
check1
check2
check3
check4
获取选中的checkbox的val,并合成为⼀个字符串以逗号隔开。
function getTheCheckBoxValue(){
var test = $("input[name='sProblem']:checked");
var checkBoxValue = "";
test.each(function(){
checkBoxValue1 += $(this).val()+",";
})
checkBoxValue = checkBoxValue.substring(0,checkBoxValue.length-1);
}
设置获取到的值给checkbox赋值
function setTheCheckBoxValue(){
var checkBox = "1,2,3";
var checkBoxArray = checkBox.split(",");
for(var i=0;i
$("input[name='sProblem']").each(function(){
if($(this).val()==checkBoxArray[i]){
$(this).attr("checked","checked");
}
})
}
}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论