JS的一些操作（多选框、动态剔除、限制输入字符）
日期：2014-05-16 浏览次数：20548 次
JS的一些操作（多选框、动态删除、限制输入字符）
?
1、一个复选框，点击之后一组复选框全部都选上
<%@ Page Language="C#" CodeBehind="Default.aspx.cs" Inherits="practise._Default" %>
<!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="checkbox" name=" checkA " onpropertychange=" for(i=0;i<A.children.length;i++){A.children[i].checked=this.checked} ">
<br />
<span id="A">
<input type="checkbox" name=" A1 " />
<input type="checkbox" name=" A2 " />
<input type="checkbox" name=" A3 " />
</span>
</div>
</form>
</body>
</html>
2、动态添加、删除两边的数据
<!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>
<title></title>
</head>
<mce:script type="text/javascript" language="javascript"><!--
function addItem(fromName, toName) {
eval_r("var obj1=myForm." + fromName);
eval_r("var obj2=myForm." + toName); obj1.options[0].selected = false;
if (obj1.selectedIndex == -1)
return false;
var tempValue; var tempText;
for (var i = 1; i < obj1.length; i++) {
// begin from 1
if (obj1.selectedIndex == -1) break;
tempValue = obj1.options[obj1.selectedIndex].value;
tempText = obj1.options[obj1.selectedIndex].text;
obj1.options[obj1.selectedIndex] = null;
obj2.add(new Option(tempText, tempValue), 0);
}
}
function deleteItem(fromName, toName) {
eval_r("var obj1=myForm." + fromName);
eval_r("var obj2=myForm." + toName);
if (obj1.selectedIndex == -1)
return false;
var tempValue;
var tempText;
for (var i = 0; i < obj1.length; i++) {
// begin from 0
if (obj1.selectedIndex == -1) break;
tempValue = obj1.options[obj1.selectedIndex].value;
tempText = obj1.options[obj1.selectedIndex].text;
obj1.options[obj1.selectedIndex] = null;
obj2.add(new Option(tempText, tempValue), 1); // addItem index is 1
}
}
// --></mce:script>
<body>
<form name="myForm" method="post">
<select name="dept_company" size="10" multiple="multiple" id="dept_company">
<option value="">Please Select... </option>
<option value="a">AA</option>
<option value="b">BB</option>
<option value="c">CC</option>
</select>
<input name="dept_company_list" type="hidden" />
<input name="button" type="button" onclick="addItem('dept_company','dept_company2')"
value="添加-->>" />
<input name="button" type="button" onclick="deleteItem('dept_company2','dept_company')"
value="<<--删除" />
<select name="dept_company2" size="10" multiple="multiple" id="dept_company2">
</select>
</form>
</body>
</html>
3、即时提示限制输入的字符数
<!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>
<title></title>
</head>
<mce:script language="javascript" type="text/javascript"><!--
function SymError() {
return true;
}
window.onerror = SymError;
function strlength(str) {
var l = str.length;
var n = l;
for (var i = 0; i < l; i++) {
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
