我正在尝试显示用户定义的复选框数,并在另一个文本框中显示复选框的值

时间:2013-06-13 04:01:26

标签: jquery

我得到了要显示的ckeckbox,但是我无法获得文本框中显示的ckeck的值。这是我的整个代码:

<html>
<head>
    <script src="jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function() {
                $v = $("#txt").val();  
                for(i=0; i<$v; i++)
                {var box=$('<input type="checkbox" id="chkbx" name="chkbx"  value="Option">Option+$i<br/>');   
                    $("#display").append(box);    
                }
            });
            function displayVals() 
            {      
                var checkbox = $("#chkbx").val();       
                $("p").html("<b>Selected Options:</b> " + checkbox.join("  |  "));   
            }     
            displayVals();
    </script>
</head>
<body>
    <center>
    <table border=0>
        <tr>
            <td><input type="text box" id="txt" name="text" placeholder="Enter value .."/>
            <td><button id="btn1">Create</button>
        </tr>
        <tr>
        <td><div id="display"></div></tr>
        <tr>
        <td><input type="text box" id="show" name="show" placeholder="Display Selection.."/>
        <td><p></p>
        </tr>
    </center>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

请参阅:http://jsfiddle.net/Xar2d/

你想要这样的事情:

$(document).ready(function () {
    $("#btn1").click(function () {
        $v = $("#txt").val();
        for (i = 0; i < $v; i++) {
            var box = $('<input type="checkbox" class="chkbx" name="chkbx"  value="Option' + i + '">Option ' + i + '<br/>');
            $("#display").append(box);
        }
    });

    $(document).on("change", ".chkbx", function () {
        $("#show").val("");
        var selected = [];
        $(".chkbx:checked").each(function () {
            selected.push($(this).val());
        });
        $("#show").val(selected.join(", "));
    });
});