我试图获取复选框的值,并在检查后将它们放入输入字段。通过使用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=""> </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(", "));
});
});
答案 0 :(得分:2)
使用
.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(", "));
});
});
&#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=""> </td>
</tr>
</tbody>
</table>
&#13;