JS的一些操作（多选框、动态删除、限制输入字符） -

zengtoy

浏览: 33357 次

最近访客更多访客>>

0402030108

atianchen

ly199108171231

dodan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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++) {
            if (str.charCodeAt(i) < 0 || str.charCodeAt(i) > 255)
                n++
        }
        return n;
    }
    function changebyte(value, length) {
        var l = strlength(value)
        if (l <= length) {
            if (document.all != null)
                document.all("byte").innerText = " 还可以输入" + (length - l) + " 字节 ";
        } else {
            document.all("byte").innerText = " 输入字节数超出范围";
        }
        return true;
    }

    function changebyte1(value, length) {
        var l = strlength(value)
        if (l <= length) {
            if (document.all != null) document.all("byte1").innerText = " 还可以输入 " + (length - l) + " 字节 ";
        }
        else {
            document.all("byte1").innerText = " 输入字节数超出范围 ";
        }
        return true;
    }

    function changebyte2(value, length) {
        var l = strlength(value)
        if (l <= length) {
            if (document.all != null) document.all("byte2").innerText = " 还可以输入 " + (length - l) + " 字节 ";
        }
        else {
            document.all("byte2").innerText = " 输入字节数超出范围 ";
        }
        return true;
    }
// --></mce:script>

<body>
    <form method=" post " name="test" onsubmit=" return checkdata() " action="">
    <textarea onkeydown=" return changebyte1(document.test.icqcontent.value,198)" onkeyup=" return changebyte1(document.test.icqcontent.value,198) "
        name="icqcontent" cols="40" rows=" 3 ">

分享到：