多选框向后台传值，多选框的回显，对多选框的各种操作

来源：互联网发布：橙子助手有没有mac版编辑：程序博客网时间：2024/06/06 13:48

1.多选框的回显：

js：$(
function(){
var checkBoxAll =$("input[name^='checkbox_']");//获取前缀为checkbox_的所有多选框对象
var checkArray=${list};//获取多选框需要回显得对应的值集合
console.info("checkArray=",checkArray);
for(var i=0;i<checkArray.length;i++){//
//获取所有复选框对象的value属性，然后，用checkArray[i]和他们匹配，如果有，则说明他应被选中
$.each(checkBoxAll,function(j,checkbox){
//获取复选框的value属性
var checkValue=$(checkbox).val();
if(checkArray[i]==checkValue){
$(checkbox).attr("checked",true);
}
})
}
});

2.多选框往后台传值接收：

request.getParameterValues("c1");他返回的是一个String[]，其中c1是多选框的name，由于多选框name是一样的，所以可以获取到所有选中的多选框的值

另附所有对多选框的操作（转载）：

//注意： 操作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、获取所有选中的checkbox11     $("input:checkbox:checked");//or12     $("input:[type='checkbox']:checked");//or13     $("input[type='checkbox']:checked");//or14     $("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 {32             alert("没有选中");33         }34     });35 36     //7、设置checkbox为选中状态37     $('input:checkbox').attr("checked", 'checked');//or38     $('input:checkbox').attr("checked", true);39 40     //8、设置checkbox为不选中状态41     $('input:checkbox').attr("checked", '');//or42     $('input:checkbox').attr("checked", false);43 44     //9、设置checkbox为禁用状态(jquery<1.6用attr,jquery>=1.6建议用prop)45     $("input[type='checkbox']").attr("disabled", "disabled");//or46     $("input[type='checkbox']").attr("disabled", true);//or47     $("input[type='checkbox']").prop("disabled", true);//or48     $("input[type='checkbox']").prop("disabled", "disabled");49 50     //10、设置checkbox为启用状态(jquery<1.6用attr,jquery>=1.6建议用prop)51     $("input[type='checkbox']").removeAttr("disabled");//or52     $("input[type='checkbox']").attr("disabled", false);//or53     $("input[type='checkbox']").prop("disabled", "");//or54     $("input[type='checkbox']").prop("disabled", false);
　　代码如下：
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4     <title></title> 5 </head> 6 <body> 7     <h3>jQuery操作checkbox 8     </h3> 9     <input type="checkbox" id="cbCheckbox1" value="1" />10     <input type="checkbox" value="2" />11     <input type="checkbox" disabled="disabled" value="3" />12     <input type="checkbox" value="4" />13     <input type="checkbox" disabled="true" value="5" />14     <br />15     <input type="button" id="btnDisabled" value="禁用" onclick="fn_disabled();" />16     <input type="button" id="Button1" value="启用" onclick="fn_enable();" /><br />17     <input type="button" id="Button2" value="获取选中的值" onclick="getCheckedValues();" /><br />18     <input type="button" id="Button3" value="选中第二个" onclick="checkedSecond();" />19     <input type="button" id="Button4" value="取消选中第二个" onclick="uncheckedSecond();" /><br />20 </body>21 </html>22 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>23 <script type="text/javascript">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 </script>

0 0