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

Place values from checkboxes into html input field

本文关键字：html 输入 字段 复选框      更新时间：2023-09-26

我正在尝试获取复选框的值，并在选中后将它们放入输入字段中。 通过使用 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(", "));
    });
 });

使用.val()而不是.html()，因为您正在设置元素的属性value而不是更新元素的innerHTML

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

相关文章：