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

Question

我正在尝试获取复选框的值，并在选中后将它们放入输入字段。通过使用 JavaScript，我能够在 <span> 中显示这些值标签。但是，当我尝试在 <input> 中执行此操作时标记，它们不会出现。

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>

JavaScript:

 $(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(", "));

    });
 });

Answer 1

Use .val() instead of .html() as you are setting value property of the element, not updating innerHTML of the element

$(function() {
  $(".dropdown_container input").change(function() {
    var checked = $(".dropdown_container input:checked");
    var span = $(".dropdown_box input");
    span.val(checked.map(function() {
      return $(this).val();
    }).get().join(", "));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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" />Value 1</label>
            </li>
            <li>
              <label>
                <input name="categories" type="checkbox" id="categories" value="2" />Value 2</label>
            </li>
            <li>
              <label>
                <input name="categories" type="checkbox" id="categories" value="3" />Value 3</label>
            </li>
            <li>
              <label>
                <input name="categories" type="checkbox" id="categories" value="4" />Value 4</label>
            </li>
            <li>
              <label>
                <input name="categories" type="checkbox" id="categories" value="5" />Value 5</label>
            </li>
          </ul>
        </div>
      </td>
    </tr>
    <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>