Question

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

代码：

<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>

Answer 1

您可以展开的一些代码：

<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/

Answer 2

<强> 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/。

Answer 3

从语义上讲，复选框实际上不是选择启动操作的最佳控件。我会进行编辑或付费（可操作的）按钮/图标，启动允许用户输入值的操作。

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

鉴于

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

使用

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

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

使用复选框填充文本字段

3 个答案: