javascript - 将多个复选框的值传递给文本框

Question

我需要 Java 脚本将多个复选框的值传递给文本框吗？

例如：如果我选中两个复选框，那么我会看到文本框显示两个复选框的值，用逗号分隔，如“咖啡，啤酒”。当我取消选中选中的复选框时，该特定值应该从文本框中消失。

       <form name="form1">
       <input type="checkbox" name="checkboxname" value="coffee">
       <input type="checkbox" name="checkboxname" value="tea">
       <input type="checkbox" name="checkboxname" value="beer">

         </form>

          <form name="form2">
          <input type="text" name="textname">
              </form>

谢谢您的帮助。

Answer 1

我猜你需要这样的东西：http: //jsfiddle.net/Ggxqn/

$("form[name=form1]").on("click", "input[type=checkbox]", function() {
    var values = $.map($("input[type=checkbox]:checked"), function(el) {
        return el.value;
    });
    $("form[name=form2]").find("input[name=textname]").val(values); 
});

Answer 2

好吧，我的解决方案不是那么优雅。

var textbox = document.getElementsByName("textname")[0];
var checkboxes = document.getElementsByName("checkboxname");
for (var i = 0; i < checkboxes.length; i++) {
    var checkbox = checkboxes[i];
    checkbox.onclick = (function(chk){
        return function() {
            var value = "";
            for (var j = 0; j < checkboxes.length; j++) {
                if (checkboxes[j].checked) {
                    if (value === "") {
                        value += checkboxes[j].value;
                    } else {
                        value += "," + checkboxes[j].value;
                    }
                }
            }
            textbox.value = value;
        }
    })(checkbox);
}  

演示
希望它也可以帮助你。

Answer 3

在每个复选框中添加 class="click_checkbox"，在输入类型文本中添加 id="textname"。

然后在你的页面中添加这个 jquery。

$(".click_checkbox").live('click',function(){   
    var checkbox_value=$(this).val();
    if($("#textname").val()=="")
   {
    var str=$("#textname").val()+checkbox_value;
   }
    else
    {
    var str=$("#textname").val()+","+checkbox_value;
    }       
    $("#textname").val(str);
});

只需包含 jquery.js。希望它对你有用。