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

这里是我的代码：多个复选框值将在文本框中显示

<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价值，但不能把所有选中的值在文本框中一次。我在哪里出错？任何投入将赞赏。

来源

2012-07-31 Tirtha

第一你需要改变复选框的ID。它应该是唯一的，不一样的。然后你可以用一些常见的类名来改变选择符#check。 – 2012-07-31 08:07:11

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

编辑：更新

来源

2012-07-31 08:07:09

感谢您的回复，但chkbox未被检查...它仍然将值分配给文本框，在这方面的任何输入+ 1个事情 - >如果一个组合（假设“acd”或“cd”被选中）不再重复。任何投入..... – Tirtha 2012-07-31 10:00:53

哦，对不起，我不知道。会做一些改变。 – 2012-07-31 13:24:41

@Vivekanand：看看这个：http://jsfiddle.net/XwGJ9/1/这有帮助吗？ – 2012-07-31 13:34:16

所以我想你想的值在文本框中一起追加。在这种情况下，请执行以下操作：

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

来源

2012-07-31 08:08:00 Stegrex

上的任何输入>假设我选择a，b，c或b，c复选框，则该值将显示在另一个文本框中像“苹果，蜜蜂，柑橘”或“蜜蜂，柑橘”（这里这些值不是复选框输入，我必须硬编码它）......任何想法。 – Tirtha 2012-08-01 07:53:09

曾使用过这样的事情..可以帮助你

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

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

来源

2012-07-31 08:11:22 Dru

使用此代码

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

来源

2012-07-31 08:13:05 Usman

为您的答复，但破坏此代码时显示“ISO-8859-1”字符编码错误的Thnks +根本不工作这段代码 – Tirtha 2012-07-31 12:38:27

如果你只是想没有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); 
       } 
     });

来源

2012-07-31 09:49:52

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

回答

相关问题