首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

这段js如何改成jquery写

2013-10-15 
这段js怎么改成jquery写啊如题,代码如下:!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN

这段js怎么改成jquery写啊
如题,代码如下:

<!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=utf-8" />
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var obox = document.getElementById("aLiterADiv");
            var cboList = obox.getElementsByTagName("input");
            var oText = document.getElementById("txtLoadList");
            document.getElementById("aLiterADiv").onclick = function (e) {
                var src = e ? e.target : event.srcElement;
                if (src.tagName == "INPUT") {
                    var values = [];
                    for (var i = 0; i < cboList.length; i++) {
                        if (cboList[i].checked) {
                            values.push(cboList[i].value);
                        }
                    }
                    oText.value = values.join(",");
                }
            }
        }
    </script>
</head>
<body>
    <p>
        <input type="text" id="txtLoadList" /></p>
    <div id="aLiterADiv">
        <label>
            <input type="checkbox" value="这" />这</label>
        <label>
            <input type="checkbox" value="里" />里</label>
        <label>
            <input type="checkbox" value="是" />是</label>
        <label>
            <input type="checkbox" value="选" />选</label>
        <label>
            <input type="checkbox" value="项" />项</label>
        <label>
            <input type="checkbox" value="内" />内</label>
        <label>
            <input type="checkbox" value="容" />容</label>
        <label>
            <input type="checkbox" value="啊" />啊</label>
    </div>
</body>
</html>

[解决办法]

<!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=utf-8" />


    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript">

        $(function(){
        $('#aLiterADiv').click(function(){
         var rs=$('#aLiterADiv :checkbox:checked').map(function(){return this.value}).toArray();
         $('#txtLoadList').val(rs);
        })
        })
    </script>
</head>
<body>
    <p>
        <input type="text" id="txtLoadList" /></p>
    <div id="aLiterADiv">
        <label>
            <input type="checkbox" value="这" />这</label>
        <label>
            <input type="checkbox" value="里" />里</label>
        <label>
            <input type="checkbox" value="是" />是</label>
        <label>
            <input type="checkbox" value="选" />选</label>
        <label>
            <input type="checkbox" value="项" />项</label>
        <label>
            <input type="checkbox" value="内" />内</label>
        <label>
            <input type="checkbox" value="容" />容</label>
        <label>
            <input type="checkbox" value="啊" />啊</label>
    </div>
</body>
</html>


[解决办法]
给checkbox加上name值,

<input type="checkbox" name="chk" value="xxoo1"/>
<input type="checkbox" name="chk" value="xxoo2"/>
<input type="checkbox" name="chk" value="xxoo3"/>
$("['name'='chk']").val();

然后取name的val就可以直接全部取出来并且已经是以逗号隔开的了。

热点排行
Bad Request.