Question

嗨有一种方法可以使用控制Javascript来检查“selezionatoCheckBox”时删除“qtaTextBox”和“costoTextBox”吗？我的问题是列表视图中元素的管理，没有它我可以做到感谢

<ItemTemplate>
        <tr style="background-color: #E0FFFF;color: #333333;">
            <td><asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>' /></td>
            <td><asp:Label ID="attivitaLabel" runat="server" Text='<%# Eval("attivita") %>' /></td>
            <td><asp:Label ID="tariffa_studioLabel" runat="server" Text='<%# Eval("tariffa_studio") %>' /></td>
            <td><asp:Label ID="noteLabel" runat="server" Text='<%# Eval("note") %>' /></td>
            <td><asp:Label ID="dirittiLabel" runat="server" Text='<%# Eval("diritti") %>' /></td>
            <td><asp:Label ID="costo_realeLabel" runat="server" Text='<%# Eval("costo_reale") %>' /></td>             
            <td><asp:CheckBox ID="selezionatoCheck" runat="server" Text="Presente" /></td>
            <td><asp:TextBox ID="qtaTextBox" runat="server" /></td>
            <td><asp:TextBox ID="costoTextBox" runat="server" /></td>
        </tr>
    </ItemTemplate>

Answer 1

当我检查时，
擦除“qtaTextBox”和“costoTextBox” “selezionatoCheckBox”

您可以将事件处理程序绑定到复选框的click事件，并在单击时清除文本框，类似于：

var selCheck = document.getElementById('selezionatoCheckBox');
var qtaText = document.getElementById('qtaTextBox');
var costoText = document.getElementById('costoTextBox');

selCheck.addEventListener('click', function(){
    if(this.checked){ // if not needed if you always want to clear
        qtaText.value = '';
        costoText.value = '';
    }
});

DEMO - 单击检查时的明文

如果列表的每一行都有这些控件，您可能需要为每个文本框/复选框控制数据属性，即：data-row和data-id以进行选择和分组。类似于：

<tr>
    <td>
        <input data-row="1" data-id="qtaTextBox" type="text"></input>
    </td>
    <td>
        <input data-row="1" data-id="costoTextBox" type="text"></input>
    </td>
    <td>
        <input data-row="1" data-id="selezionatoCheckBox" type="checkbox"></input>
    </td>
</tr>
<tr>
    <td>
        <input data-row="2" data-id="qtaTextBox" type="text"></input>
    </td>
    <td>
        <input data-row="2" data-id="costoTextBox" type="text"></input>
    </td>
    <td>
        <input data-row="2" data-id="selezionatoCheckBox" type="checkbox"></input>
    </td>
</tr>

使用data-id属性可以选择多个控件，因为id只会返回第一个匹配。

使用data-row属性可以对控件进行分组，因此第1行的复选框也只会清除第1行的文本框，与此类似：

var selChecks = document.querySelectorAll('[data-id=selezionatoCheckBox]');
var index;
var checkLength = selChecks.length;

for (index = 0; index < checkLength; index++) {
    selChecks[index].addEventListener('click', function () {
        var qtaText = document.querySelector('[data-id="qtaTextBox"][data-row="' + this.dataset.row + '"]');
        var costoText = document.querySelector('[data-id="costoTextBox"][data-row="' + this.dataset.row + '"]');

        if (this.checked) { // if not needed if you always want to clear
            qtaText.value = '';
            costoText.value = '';
        }
    });
}

DEMO - 清除与支票位于同一行的文字

在ListView中使用带有Checkbox的Javascript控件

1 个答案: