Question

我有以下html表单：

<form>
 <input type="checkbox" name="fruits[]" value="apples" /><input type="text" value="false" /><br/>
 <input type="checkbox" name="fruits[]" value="oranges" /><input type="text" value="false" /><br/>
 <input type="checkbox" name="fruits[]" value="grapes" /><input type="text" value="false" /><br/>
 <input type="checkbox" name="fruits[]" value="bananas" /><input type="text" value="false" /><br/>
</form>

现在我想写一些javascript / JQuery，当我选中或取消选中一个复选框时，相应的文本框会显示“true”或“false”。在不更改javascript的情况下添加更多水果应该很容易。

以优雅的方式做到这一点的最佳方式是什么？

Answer 1

这在纯javascript中很容易，你真的不需要jQuery。只需使用一个更新文本字段的函数分配每个复选框的onchange事件，就必须在复选框和文本字段之间建立关系。该功能可能类似于：

// assign to onchange like: onchange="updateTextField(this)"
function updateTextField(cb) {
  // this assumes that the corresponding text field has id with the same name as the
  // checkbox value
  var tf = document.getElementById(cb.value);
  tf.value = cb.checked.toString();
}

Answer 2

您需要在复选框和文本字段之间建立某种关系。这样的东西可以使用jQuery，并且非常可扩展。

<form>
     <input type="checkbox" value="apples" /><input type="text" value="false" for="apples"/><br/>
     <input type="checkbox" value="oranges" /><input type="text" value="false" for="oranges" /><br/>
     <input type="checkbox" value="grapes" /><input type="text" value="false" for="grapes" /><br/>
     <input type="checkbox" value="bananas" /><input type="text" value="false" for="bananas"/><br/>
</form>

<script>
$(function() {
    $(":checkbox").click(function() {
        if ($(this).attr('checked')) {
            $('input[for$="' + $(this).val() + '"]').val("true");
        } else {
            $('input[for$="' + $(this).val() + '"]').val("false");
        }
    })
})
</script>

使用JQuery更新这些表单字段的最简单方法是什么？

2 个答案: