在一个文本框中获取多个值的麻烦

Question

我有四个框，如果我单击一个框，则要在一个文本中获取这些值，如果我单击两个文本框，则要在文本中获取一个值，文本也将得到两个值，我也想用逗号分隔这些值。

<li><a href="javascript:void(0)"  onclick="check_stalls('A-14')"  id="A-14">A-14</a></li>
    <li ><a href="javascript:void(0)" onclick="check_stalls('A-13')" id="A-13">A-13</a></li>
    <li ><a href="javascript:void(0)" onclick="check_stalls('A-12')" id="A-12">A-12</a></li>
    <li ><a href="javascript:void(0)" onclick="check_stalls('A-11')" id="A-11">A-11</a></li>

<input type="text" name="selected_stals" id="selected_stals" />

function check_stalls(stalno)
{
    alert(stalno);

    document.getElementById(stalno).style.backgroundColor = "#FF0";

    var textbox = document.getElementsByName("selected_stals")[0];
var checkboxes = stalno;

alert(checkboxes);
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;
        }
    })(textbox);
}  


}

我像复选框一样尝试它，但不起作用...

Answer 1

HTML

<ul><li><a href="#"  id="A-14">A-14</a></li>
    <li ><a href="#" id="A-13">A-13</a></li>
    <li ><a href="#" id="A-12">A-12</a></li>
    <li ><a href="#" id="A-11">A-11</a></li></ul>

<input type="text" name="selected_stals" id="selected_stals" />

JS（jQuery）

$(function(){
    $('a').click(function(){
        var val = $(this).text();
        var text = $('#selected_stals').val();
        var newText = val;
        if(text != ""){
            newText += "," + text;
        }
        $('#selected_stals').val(newText);
    });
})

http://jsfiddle.net/xhnsucgw/5/

希望你想要什么。

Answer 2

您用“ jquery”标记了您的帖子，因此，假设您使用的是jQuery，并假设我正确地理解了您的要求，则可以这样处理：

<ul id="boxes">
   <li><a href="#" id="A-14">A-14</a></li>
   <li><a href="#" id="A-13">A-13</a></li>
   <li><a href="#" id="A-12">A-12</a></li>
   <li><a href="#" id="A-11">A-11</a></li>
</ul>

<input type="text" name="selected_stals" id="selected_stals" />

...，然后将其与其他脚本一起使用：

$("#boxes a").on("click", function(e){
    if($("#selected_stals").val() == ""){
        $("#selected_stals").val($(this).html());
    }else{
        $("#selected_stals").val($("#selected_stals").val()
            + ", " + $(this).html());
    }
});

这是工作的JSFiddle 。