如何用asp实现checkbox多选
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用asp实现checkbox多选相关的知识，希望对你有一定的参考价值。
假设有N个checkbox，但我规定最多只能选3个，怎么解决
参考技术A 实现这个其实很简单.这只是一个思路问题,目的就是已经有N(指定数量)被勾选后再选择就提示并不让选择,方法可以有很多种,可以弄一个变量或一个隐藏域来存储已选值(这样可以提高检查时的速度)如:以下值记录在checkbox的container元素上的checkboxValue属性上,如果有初始化值直接写上(以半角,号隔开)
<div id="checkboxContainer" checkboxValue="">
<input name="ck" type=checkbox value=1 onclick="return checkValue(this);;">1
<input name="ck" type=checkbox value=2 onclick="return checkValue(this);;">2
<input name="ck" type=checkbox value=3 onclick="return checkValue(this);;">3
<input name="ck" type=checkbox value=4 onclick="return checkValue(this);;">4
<input name="ck" type=checkbox value=5 onclick="return checkValue(this);;">5
<input name="ck" type=checkbox value=6 onclick="return checkValue(this);;">6
<input name="ck" type=checkbox value=7 onclick="return checkValue(this);;">7
<input name="ck" type=checkbox value=8 onclick="return checkValue(this);;">8
<input name="ck" type=checkbox value=9 onclick="return checkValue(this);;">9
<input name="ck" type=checkbox value=10 onclick="return checkValue(this);;">10
</div>
<script>
function checkValue(ck)
var cn = document.getElementById("checkboxContainer");
var v = cn.getAttribute("checkboxValue");
var vs = v==""?[]:v.split(",");
if(!ck.checked)//如果是checked说明是取消选择
vs.splice(vs.indexOf(ck.value),1);
else
if(vs.length>=3)
alert("只能选择最多3项!");return false;
vs.push(ck.value);
cn.setAttribute("checkboxValue",vs.join(","));
return true;
</script> 参考技术B <%
if request("checkboxName")<>"" then
checkboxNo=UBound(Split(request("checkboxName"),","))
if checkboxNo>2 then
response.Write "<script LANGUAGE='javascript'>alert('最多只能选3个.');history.go(-1);</script>"
response.end
end if
end if
%> 参考技术C 随便写了一个，大概就是这个意思了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>checkbox选择限制示例</title>
</head>
<body>
<label>
<input type="checkbox" name="checkbox1" value="checkbox" onclick="vbscript:call dd(1)" />
这是第一个
<input type="checkbox" name="checkbox2" value="checkbox" onclick="vbscript:call dd(2)"/>
这是第二个</label>
<label>
<input type="checkbox" name="checkbox3" value="checkbox" onclick="vbscript:call dd(3)"/>
这是第三个</label>
<label>
<input type="checkbox" name="checkbox4" value="checkbox" onclick="vbscript:call dd(4)"/>
这是第四个</label>
<label>
<input type="checkbox" name="checkbox5" value="checkbox" onclick="vbscript:call dd(5)"/>
这是第五个</label>
<script language="vbscript">
<!--
function dd(m)
dim t,k
for t=1 to 5
if document.getElementById("checkbox" & t).checked=true then
k=k+1
end if
next
if k>3 then
msgbox "超过了"
document.getElementById("checkbox" & m).checked=false
end if
end function
-->
</script>
</body>
</html> 参考技术D <HEAD>
<TITLE>CheckBoxList实例</TITLE>
</HEAD>
<SCRIPT language="JavaScript">
function SetCheckBoxState(str)
o = document.getElementsByTagName("INPUT")
var val=0;
for(i=0;i<o.length;i++)
if(o[i].type=="checkbox" && o[i].checked && o[i].name==str)
val = val + 1;
if(val > 3)
alert('你选择的项目只能在3个以内！')
o[i].checked=false;
return;
</SCRIPT>
</head>
<body>
<tr>
<td><input type="checkbox" name="name1" onclick="SetCheckBoxState('name1')" value="1"/>1</td>
<td><input type="checkbox" name="name1" onclick="SetCheckBoxState('name1')" value="2"/>2</td>
<td><input type="checkbox" name="name1" onclick="SetCheckBoxState('name1')" value="3"/>3</td>
<td><input type="checkbox" name="name1" onclick="SetCheckBoxState('name1')" value="4"/>4</td>
</tr>
</body>
</html>
kndo grid：通过checkbox 实现多选和全选
在kendo grid 里要想通过checkbox 实现多选和权限，我们就要通过templeate 和input 标签对kendo grid 进行自定义
1. 在column 里面加入一列checkbox
{ title: " <input id=\'checkAll\' type=\'checkbox\' id=\'chkSelectAll\' onclick=\'selectAllRow(this)\' /> ", template: "<input type=\'checkbox\' onclick=\'selectRow()\' class=\'grid_checkbox\' />", width: 60, filterable: false, sortable: false },
然后实现全选方法
function selectAllRow(ele) { var state = $(ele).is(\':checked\'); if(state) { //selectRow(); $(\'tr\').find(\'[type=checkbox]\').prop(\'checked\', true); $(\'tr\').removeClass("k-state-selected"); $(\'tr\').addClass("k-state-selected"); } else { $(\'tr\').find(\'[type=checkbox]\').prop(\'checked\', false); $(\'tr\').removeClass("k-state-selected"); }
as follow image:
code:
<!DOCTYPE html> <html> <head> <base href="http://demos.telerik.com/kendo-ui/grid/editing-popup"> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common-material.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.material.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.material.mobile.min.css" /> <script src="//kendo.cdn.telerik.com/2016.3.1028/js/jquery.min.js"></script> <script src="//kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script> </head> <body> <div id="example"> <div id="grid"></div> <script id="template" type="text/x-kendo-template"> <a class="k-button" href="javascript:void(0)" onclick="Editbtn()">EDIT</a> <a class="k-button" href="javascript:void(0)" onclick="Deletebtn()">DELETE</a> </script> <script> $(document).ready(function () { var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service", dataSource = new kendo.data.DataSource({ transport: { read: { url: crudServiceBaseUrl + "/Products", dataType: "jsonp" }, update: { url: crudServiceBaseUrl + "/Products/Update", dataType: "jsonp" }, destroy: { url: crudServiceBaseUrl + "/Products/Destroy", dataType: "jsonp" }, create: { url: crudServiceBaseUrl + "/Products/Create", dataType: "jsonp" }, parameterMap: function(options, operation) { if (operation !== "read" && options.models) { return {models: kendo.stringify(options.models)}; } } }, batch: true, pageSize: 20, schema: { model: { id: "ProductID", fields: { ProductID: { editable: false, nullable: true }, ProductName: { validation: { required: true } }, UnitPrice: { type: "number", validation: { required: true, min: 1} }, Discontinued: { type: "boolean" }, UnitsInStock: { type: "number", validation: { min: 0, required: true } } } } } }); $("#grid").kendoGrid({ dataSource: dataSource, pageable: true, height: 550, toolbar: ["create", { template: kendo.template($("#template").html()) }], columns: [ { title: " <input id=\'checkAll\' type=\'checkbox\' id=\'chkSelectAll\' onclick=\'selectAllRow(this)\' /> ", template: "<input type=\'checkbox\' onclick=\'selectRow()\' class=\'grid_checkbox\' />", width: 60, filterable: false, sortable: false }, { field:"ProductName", title: "Product Name" }, { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" }, { field: "UnitsInStock", title:"Units In Stock", width: "120px" }, { field: "Discontinued", width: "120px" }, ], editable: "popup", selectable: "multiple row", }); }); function Editbtn(){ var cust_grid= $("#grid").data("kendoGrid"); var selectrow= cust_grid.items().index(cust_grid.select())+1; cust_grid.editRow($("#grid tr:eq("+selectrow+")")); } function Deletebtn(){ if (confirm("Are you sure you want to delete these records?")) { var cust_grid= $("#grid").data("kendoGrid") var selectedrows = cust_grid.select(); cust_grid.dataSource.remove(cust_grid.dataItem(selectedrows)); } } function selectAllRow(ele) { var state = $(ele).is(\':checked\'); if(state) { //selectRow(); $(\'tr\').find(\'[type=checkbox]\').prop(\'checked\', true); $(\'tr\').removeClass("k-state-selected"); $(\'tr\').addClass("k-state-selected"); } else { $(\'tr\').find(\'[type=checkbox]\').prop(\'checked\', false); $(\'tr\').removeClass("k-state-selected"); } } </script> </div> </body> </html>
demo: http://dojo.telerik.com/OPola
以上是关于如何用asp实现checkbox多选的主要内容，如果未能解决你的问题，请参考以下文章