將複選框的值放入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

使用.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>