如何为输入字段提供上次复选复选框的值？

Question

我想让我的输入框始终显示最后一个复选框的值.

这是我的尝试,但它不起作用:

<input type="text" name="status" value="blue" class="status"/>

<div class="checkbox"><input type='checkbox' value='blue' checked/> blue</div>
<div class="checkbox"><input type='checkbox' value='green' checked/> green</div>
<div class="checkbox"><input type='checkbox' value='yellow' checked/> yellow</div>

$("input").change(function(){
     $('.status').val($('input:checkbox:last'));
});

https://jsfiddle.net/4csbmtad/

也许你有我的建议!

---

我正在进行更新,我忘了:如果没有选中任何内容,那么我需要在输入字段中显示"没有选中"这个词

Answer 1

您可以使用选择器作为 :checkbox:checked:last

1. :checkbox 获取复选框
2. :checked 从中筛选复选复选框
3. :last 得到最后一次检查
4. 触发change()事件以在页面加载时设置值

.

$("input").change(function() {
  var $chk = $(':checkbox:checked:last');
  $('.status').val($chk.length ? $chk.val() : 'nothing is selected');
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="status" value="blue" class="status" />

<div class="checkbox">
  <input type='checkbox' value='blue' checked/>blue</div>
<div class="checkbox">
  <input type='checkbox' value='green' checked/>green</div>
<div class="checkbox">
  <input type='checkbox' value='yellow' checked/>yellow</div>

更新:检查length选择器的属性以检查是否至少检查了一个.