这段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>

解决方案 »

  1.   


    <!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>
      

  2.   

    给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就可以直接全部取出来并且已经是以逗号隔开的了。
      

  3.   


    <script type="text/javascript">
    var cboList = null;
    $(document).ready(function() {
        var obox = $("#aLiterADiv");
        var cboList = obox.find("input");
        //$("#aLiterADiv").bind("click", function(e) {
        //    ...  
        //});
        // 可以改为下面的
        cboList.each(function() {
            $(this).bind("click", function() {
                var oText = $("#txtLoadList");
                var values = [];
                if (cboList == null) {
                    cboList = $("#aLiterADiv input");
                }
                $(cboList).find(":checked").each(function() {
                    values.push($(this).val());
                });
                oText.val(values.join(","));
            });
        });
    });LZ试试
      

  4.   

    不好意思，有个地方错了，纠正下<script type="text/javascript">
    var cboList = null;
    $(document).ready(function() {
        var obox = $("#aLiterADiv");
        cboList = obox.find("input");
        //document.getElementById("aLiterADiv").onclick = function (e) {
        //    ...  
        //};
        // 可以改为下面的
        cboList.each(function() {
            $(this).bind("click", function() {
                var oText = $("#txtLoadList");
                var values = [];
                if (cboList == null) {
                    cboList = $("#aLiterADiv input");
                }
                $(cboList).find(":checked").each(function() {
                    values.push($(this).val());
                });
                oText.val(values.join(","));
            });
        });
    });
      

  5.   

    $(function(){
             $(":checkbox").click(function(){
             var values = [];
             $(":checkbox:checked").each(function(){
                 values.push($(this).val());
                 });
             $("#txtLoadList").val(values);
                });
            })
      

  6.   


    $(function(){
                var $container = $('#aLiterADiv'), $text = $('#txtLoadList');
                $container.on('click', ':checkbox', function(){
                    var $chb = $container.find(':checked'), temparr = [];
                    $.each($chb, function(){
                        temparr.push($(this).val());
                    });
                    $text.val(temparr.join(','));
                });
            });
      

  7.   

    $(function(){
                $(":checkbox").click(function(){
                    var values = [];
                    $(":checkbox:checked").each(function(){
                        values.push($(this).val());
                    });
                    $("#txtLoadList").val(values);
                });
            })
      

  8.   

    $(window).load(function(){
    var choList = $("#aLiterADiv input[type='checkbox']");
    var oText = $("#txtLoadList");
    choList.unbind("click");
    choList.bind("click",function(e){
    var values = [];
    $.each(choList,function(){
    if(this.checked){
    values.push(this.value);
    }
    });
    oText.attr("value",values.join(","));
    });
    });
    so easy。再也不用担心你的jquery
      

  9.   

            $(function () {
                $('#aLiterADiv').click(function () {
                    var rs = $('#aLiterADiv :checkbox:checked').map(function () { return this.value }).toArray();
                    $('#txtLoadList').val(rs);
                })
            })