多个复选框值将显示在文本框中

时间:2012-07-31 08:03:04

标签: javascript jquery

这是我的代码:

<body>
<div align="center">
<b>A<input type="checkbox" name="a" id="check" value="a"></b>
<b>B<input type="checkbox" name="b" id="check" value="a"></b>
<b>B<input type="checkbox" name="c" id="check" value="c"></b>
<b>D<input type="checkbox" name="d" id="check" value="d"></b>
</div>
<table align="center">
<tr>
<td>Text:</td>
<td><input type="text" name="text" id="text"></td>
</tr>
</table>
</body>

我正在尝试:如果(多个)复选框被选中(或选中),该值将被分配到复选框,如“abcd”或“acd”或“bd”。为此我写了jQuery < / p>

<script type="text/javascript">
$(document).click(function(){
if($("#check").attr('checked')){
    $("#text").val(("#check").val());
}
});
</script>

能够一次打印一个txtbox值,但无法一次将所有选中的值放入文本框中。 哪里出错了?任何投入都会受到赞赏。

5 个答案:

答案 0 :(得分:3)

我可能没有正确地理解你,但这个小提琴对你有帮助吗? http://jsfiddle.net/XwGJ9/1/

更改是javascript:

var $textInput = $('#text');
var $checkBox = $('#checkboxes');

$('input').click(function(){
    populateTextInput();
});

function populateTextInput () {
    // empty text input
    $textInput.val('');

    // print out all checked inputs
    $checkBox.find('input:checked').each(function() {
        $textInput.val( $textInput.val() + $(this).val() );
    });
}

修改:已更新

答案 1 :(得分:3)

使用此代码

$('.check').click(function(){
    $("#text").val('');
    $(".check").each(function(){
        if($(this).prop('checked')){

            $("#text").val($("#text").val()+$(this).val());
        }
    });
});​

使用此HTML(使用class代替id代表abcd)

<div align="center">
<b>A<input type="checkbox" name="a" class="check" value="a"></b>
<b>B<input type="checkbox" name="b" class="check" value="b"></b>
<b>B<input type="checkbox" name="c" class="check" value="c"></b>
<b>D<input type="checkbox" name="d" class="check" value="d"></b>
</div>
<table align="center">
<tr>
<td>Text:</td>
<td><input type="text" name="text" id="text"></td>
</tr>
</table>​

另外,我鼓励使用CSS而不是align="center"

See live, running demo

答案 2 :(得分:1)

所以我认为你想要在文本框中将值附加在一起。在这种情况下,请执行:

<script type="text/javascript">
$(document).click(function(){
if($("#check").attr('checked')){
    var textBoxVal = $("#text").val()+$("#check").val(); // Concatenate the existing textbox value with the checkbox value.
    // Load the resulting value into new var textBoxVal.
    $("#text").val(textBoxVal); // Load the new value into the textbox.
}
});
</script>

我使用原生JS只是为了让我更清楚我正在做的事情。

答案 3 :(得分:1)

曾经使用过这样的东西..可能会帮到你

var checkeditems = $('input:checkbox[name="check[]"]:checked')
                          .map(function() {
                                return $(this).val()
                           })
                            .get()
                            .join(","); 

 $("#text").val(checkeditems);

答案 4 :(得分:1)

如果您不想一次获得a,b,c,d的倍数,则onclick为每个复选框

        var boxes = $("input:checkbox");
        boxes.each(function(idx,elem){
                elem.onclick=function(event){
                    var choices = "";
                    boxes.each(function(idx,elem){
                        choices += elem.checked ? elem.name:"";
                    });
                    $('#text').val(choices);
                }
        });