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

【问题标题】：Multiple checkbox value will show in textbox多个复选框值将显示在文本框中
【发布时间】：2012-07-31 21:35:20
【问题描述】：

这是我的代码：

<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

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

能够一次打印一个 txtbox 值，但不能一次将所有检查值放入文本框中。我哪里出错了？？任何意见都将不胜感激。

【问题讨论】：

首先你需要改变复选框的id。它应该是唯一的，不一样的。然后你可以用一些常见的类名来改变选择器#check。

标签： javascript jquery

【解决方案1】：

我可能没有正确理解你，但是这个小提琴对你有帮助吗？ 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() );
    });
}

编辑：更新

【讨论】：

感谢您的回复，但未检查 chkbox...它仍然将值分配给文本框，在这方面的任何输入 + 1 更多的东西->如果一个组合（假设“acd”或“ cd" 已选中）不会再次重复。任何输入.....
哦，对不起，我没听懂。会做一些改变。
jonas，在那个链接中它工作正常，我认为你的编码是正确的，但在我的情况下它仍然无法正常工作；一旦它显示“ISO-8859-1”字符编码错误在一个简单的jsp页面中，即使我试图运行你更新的代码，但根本没有运行。我正在使用jquery-17.2.js。猜猜我哪里出错了。
@Vivekanand：当您从小提琴复制到编辑器时，您需要确保 a) 浏览器是 UTF-8 b) 编辑器是 UTF-8，c)编译器读取 UTF-8。我不是这方面的专家，但重点是你必须一直使用 ONE 编码:)
onmore thing> 假设我选择 a,b,c 或 b,c 复选框，那么它将显示在另一个文本框中，如“Apple,Bee,Citrus”或“Bee,Citrus”(这里这些值不在复选框输入中，我必须对其进行硬编码）......任何想法。

【解决方案2】：

使用此代码

$('.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

【讨论】：

感谢您的回复，但在运行此代码时显示“ISO-8859-1”字符编码错误 + 根本无法使用这段代码

【解决方案3】：

所以我认为您希望将这些值一起附加到文本框中。在这种情况下，请执行以下操作：

<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 只是为了更清楚我在做什么。

【讨论】：

还有一件事> 假设我选择了 a,b,c 或 b,c 复选框，那么该值将显示在另一个文本框中，例如“Apple,Bee,Citrus”或“Bee, Citrus”（这里这些值不在复选框输入中，我必须对其进行硬编码）......任何想法。

【解决方案4】：

曾经使用过类似的东西..可能会帮助你

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

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

【讨论】：

【解决方案5】：

如果您一次不想要 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);
                }
        });

【讨论】：