在 ListView 中使用带有复选框的 Javascript 控件

Question

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

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

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

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 - 清除与支票同一行的文本

---