用复选框填充文本字段答案

【问题标题】：Populate text field with checkbox用复选框填充文本字段
【发布时间】：2011-11-10 16:17:06
【问题描述】：

我有一个表格，其中有一列是价格，下一列是一个复选框，用于标记该项目是否已付款。我想知道如何在单击复选框时用金额填充文本框。

代码：

<table> 
  <tr> 
    <td>Procedure</td> 
    <td>Amount</td>
    <td align="center"><input type="checkbox"></td>
    <input type="text" size="20" value="" class="currency"> 
  </tr>
</table>

【问题讨论】：

你能为此展示一些示例 HTML 吗？
过程金额正在从 mysql 数据库中提取值。
该 HTML 似乎无效。最后一个input 不在单元格中。
您尝试了什么，出了什么问题？这不是一个“给我看 codez”的网站，而是一个关于编程语言问题的网站。

标签： php jquery mysql sql-server

【解决方案1】：

HTML

<table>
    <tr>
        <td>Procedure</td>
        <td>Amount</td>
        <td align="center">
            <input type="checkbox">
        </td>
        <td>
            <input type="text" size="20" value="" class="currency">
        </td>
    </tr>
</table>

JavaScript/jQuery：

$(function() {
    $('table input[type="checkbox"]').change(function() {
        var input = $(this).closest('td').next('td').find('input');

        if ($(this).is(':checked')) {
            var amount = $(this).closest('td').prev('td').text();

            input.val(amount);
        } else {
            input.val('');
        }
    });
});

查看工作示例：http://jsfiddle.net/KTQgv/2/。

【讨论】：

完美！这正是我想要做的！

【解决方案2】：

一些你可以扩展的代码：

<input type="checkbox" rel="textbox1" name="banana"/>
<textarea id="textbox1" ></textarea>

JS/jQuery:

$('input:checkbox').click(function(){
    var tb = "#"+$(this).attr('rel');
    if($(this).is(":checked"))
        $(tb).append(this.name + "\n"); 
});

小提琴：http://jsfiddle.net/maniator/hxkX3/

【讨论】：

【解决方案3】：

从语义上讲，复选框并不是选择启动操作的最佳控件。我会有一个编辑或支付（一些可操作的东西）按钮/图标来启动允许用户输入值的操作。

但是，就您的示例而言，复选框的 click 事件足以将表格单元格的内容从显示的文本（如果有）更改为文本框。

给定

<td id="row_1">Unpaid</td>

使用

$('#row_1').html('<input type="text" name="txtRow1" />');

很简单，但足以让用户输入一个值，然后在save 操作期间将其发布到服务器。

【讨论】：