Javascript 将复选框中的值放入html输入字段

我试图获取复选框的值，并在选中后将其放入输入字段。通过使用JavaScript，我能够在

标记中显示这些值。但是，当我尝试在

标记中执行此操作时，它们不会出现

HTML:

 <table width="680" border="0" cellspacing="0" cellpadding="5">
   <tbody>
     <tr>
       <td width="550" nowrap=""><br>

       <div class="dropdown_container">
         <ul id="select_colors">
            <li>
                <label>
                <input name="categories" type="checkbox" id="categories" value="1" oncheck="cat_id.value=1" />Value 1</label>
            </li>
            <li>
                <label>
                <input name="categories" type="checkbox" id="categories" value="2" oncheck="cat_id.value=2" />Value 2</label>
            </li>
            <li>
                <label>
                <input name="categories" type="checkbox" id="categories" value="3" oncheck="cat_id.value=3" />Value 3</label>
            </li>
            <li>
                <label>
                <input name="categories" type="checkbox" id="categories" value="4" oncheck="cat_id.value=4" />Value 4</label>
            </li>
            <li>
               <label>
               <input name="categories" type="checkbox" id="categories" value="5" oncheck="cat_id.value=5" />Value 5</label>
           </li>

       </ul>
     </div>
     </td>
  </tr>

<!-- Display values from checkboxes within this input tag -->

 <tr>
    <td>       
      <div class="dropdown_box">
          <input name="cat_id" type="text" id="cat_id"  />
      </div>
    </td>
    <td width="550" nowrap="">&nbsp;</td>
  </tr>
 </tbody>
 </table>

在设置元素的

value

属性时，使用

.val（）

而不是

.html（）

，而不是更新元素的

innerHTML

$（函数（）{
$（“.dropdown\u container input”）.change（函数（）{
var checked=$（“.dropdown_容器输入：checked”）；
变量范围=$（“.dropdown\u box input”）；
val（checked.map（函数（）{
返回$（this.val（）；
}).get（）.join（“，”）；
});
});





值1


价值2


价值3


价值4


价值5



 $(function () {
    $(".dropdown_container input").change(function () {
       var checked = $(".dropdown_container input:checked");
       var span = $(".dropdown_box input"); 

       span.html(checked.map(function () {
            return $(this).val().replace("_"," ");
        }).get().join(", "));

    });
 });