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

时间:2016-07-13 18:55:30

标签: javascript jquery html

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

    });
 });

1 个答案:

答案 0 :(得分:2)

  

使用.val()代替.html(),因为您要设置元素的value属性,而不是更新元素的innerHTML

&#13;
&#13;
$(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(", "));
  });
});
&#13;
<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>
&#13;
&#13;
&#13;