我有一个带有复选框的gridview供用户选择。我想在用户选择行时自动选择具有相同ID的其他行，因为它必须成对选择。
我尝试遍历所有行并在列表中添加所选ID，然后再次迭代行以选择列表中存在ID的行，但我意识到这不是一种有效的方法。
是否有任何人有类似问题的经验，或者有人建议更有效地做到这一点的方法，并且如果可能的话，通过客户端javascript来减少来回流量。
非常感谢您的帮助。
提前谢谢。
function Check_Click(objRef) {
//Get the Row based on checkbox
var row = objRef.parentNode.parentNode;
if (objRef.checked) {
//If checked change color
row.style.backgroundColor = "orange";
} else {
//If not checked change back to original color
if (row.rowIndex % 2 == 0) {
//Alternating Row Color
row.style.backgroundColor = "#e3f0f1";
} else {
row.style.backgroundColor = "white";
}
}
//Get the reference of GridView
var GridView = row.parentNode;
//Get all input elements in Gridview
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++) {
//The First element is the Header Checkbox
var headerCheckBox = inputList[0];
//Based on all or none checkboxes
//are checked check/uncheck Header Checkbox
var checked = true;
if (inputList[i].type == "checkbox" && inputList[i] != headerCheckBox) {
if (!inputList[i].checked) {
checked = false;
break;
}
}
}
headerCheckBox.checked = checked;
}
function checkAll(objRef) {
var GridView = objRef.parentNode.parentNode.parentNode;
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++) {
//Get the Cell To find out ColumnIndex
var row = inputList[i].parentNode.parentNode;
if (inputList[i].type == "checkbox" && objRef != inputList[i]) {
if (objRef.checked) {
//If the header checkbox is checked, check all checkboxes and highlight all rows
row.style.backgroundColor = "orange";
inputList[i].checked = true;
} else {
//If the header checkbox is checked, uncheck all checkboxes and change rowcolor back to original
if (row.rowIndex % 2 == 0) {
//Alternating Row Color
row.style.backgroundColor = "#e3f0f1";
} else {
row.style.backgroundColor = "white";
}
inputList[i].checked = false;
}
}
}
}<table cellspacing="1" cellpadding="4" border="0" border="0" id="ctl00_ContentPlaceHolder_gvLedger" style="border-width:0px;width:100%;">
<tr class="TblHeaderStyle">
<th scope="col">
<input id="ctl00_ContentPlaceHolder_gvLedger_ctl01_checkAllGvLedger" type="checkbox" name="ctl00$ContentPlaceHolder$gvLedger$ctl01$checkAllGvLedger" onclick="checkAll(this);" />
</th>
<th scope="col">HOLDER_ID</th>
<th scope="col">HOLDER_DTL_ID</th>
<th scope="col">HOLDER_NO</th>
<th scope="col">HOLDER_NAME</th>
<th scope="col">ST_MV</th>
<th scope="col">RB_MV</th>
<th scope="col">MVMT</th>
<th scope="col">AMT</th>
<th scope="col">TX_DATE</th>
<th scope="col">STATUS</th>
<th scope="col">CD_BY</th>
<th scope="col">CD_TIME</th>
<th scope="col">RKS</th>
<th scope="col">STATUS_MAN</th>
<th scope="col">REFER_NO</th>
<th scope="col">BATCH_NO</th>
<th scope="col">FD_CODE</th>
<th scope="col">SW_TYPE</th>
<th scope="col">ST_MV_DTL</th>
<th scope="col">RB_MV_DTL</th>
<th scope="col">AMT_DTL</th>
<th scope="col">EXCHG_RATE</th>
<th scope="col">TRANS_AMT</th>
<th scope="col">TRANS_UNIT</th>
<th scope="col">N_UNIT</th>
<th scope="col">N_DATE</th>
<th scope="col">FD_PER</th>
<th scope="col">TRANS_NO</th>
<th scope="col">TL_SW_DONE</th>
<th scope="col">TT_TL_SW</th>
</tr>
<tr class="TblRowStyle">
<td align="center">
<input id="ctl00_ContentPlaceHolder_gvLedger_ctl02_chkThisGvLedger" type="checkbox" name="ctl00$ContentPlaceHolder$gvLedger$ctl02$chkThisGvLedger" onclick="Check_Click(this);" />
</td>
<td>2</td>
<td>3</td>
<td>0000001</td>
<td>MR ABC</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>10/7/2014</td>
<td>O</td>
<td> </td>
<td> </td>
<td>CV 201709</td>
<td>N</td>
<td>CVA_2</td>
<td>2</td>
<td>02</td>
<td>from</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>500</td>
<td>853.97</td>
<td>0.5855</td>
<td>10/07/2014</td>
<td>0</td>
<td> </td>
<td>2</td>
<td>0</td>
</tr>
<tr class="TblAlternateRowStyle">
<td align="center">
<input id="ctl00_ContentPlaceHolder_gvLedger_ctl03_chkThisGvLedger" type="checkbox" name="ctl00$ContentPlaceHolder$gvLedger$ctl03$chkThisGvLedger" onclick="Check_Click(this);" />
</td>
<td>2</td>
<td>4</td>
<td>0000001</td>
<td>MR ABC</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>10/7/2014</td>
<td>O</td>
<td> </td>
<td> </td>
<td>CV 201709</td>
<td>N</td>
<td>CVA_2</td>
<td>2</td>
<td>01</td>
<td>to</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>500</td>
<td>994.43</td>
<td>0.5028</td>
<td>10/07/2014</td>
<td>100</td>
<td>00007762</td>
<td>2</td>
<td>0</td>
</tr>
<tr class="TblAlternateRowStyle">
<td align="center">
<input id="ctl00_ContentPlaceHolder_gvLedger_ctl03_chkThisGvLedger" type="checkbox" name="ctl00$ContentPlaceHolder$gvLedger$ctl03$chkThisGvLedger" onclick="Check_Click(this);" />
</td>
<td>3</td>
<td>5</td>
<td>0000002</td>
<td>MR DEF</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>10/7/2014</td>
<td>O</td>
<td> </td>
<td> </td>
<td>CV 201709</td>
<td>N</td>
<td>CVA_2</td>
<td>2</td>
<td>01</td>
<td>to</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>500</td>
<td>994.43</td>
<td>0.5028</td>
<td>10/07/2014</td>
<td>100</td>
<td>00007763</td>
<td>2</td>
<td>0</td>
</tr>
</table>
<input type="submit" name="ctl00$ContentPlaceHolder$btnGenerate" value="Proceed >" onclick="return confirm('Are you sure you want to process selected transactions?');WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder$btnGenerateSwitching", "", true, "", "", false, false))"
id="ctl00_ContentPlaceHolder_btnGenerate" class="ButtonStyle" />
答案 0 :(得分：0)
可能有很多方法可以做到这一点但你可以在每次单击一行时获取所有行，然后使用for循环遍历它们，忽略标题行。
在循环中，您只处理所有包含所选行的holder id的行。
将不等于所选行的所有行的选中状态设置为与所选行相同。
然后，您可以在循环中移动突出显示的代码，以便将所有相关的行应用于其中。
function Check_Click(objRef) {
//Get the Row based on checkbox
var selectedRow = objRef.parentNode.parentNode;
var selectedId = selectedRow.cells[1].innerHTML;
// Get All Rows
var allRows = selectedRow.parentNode.parentNode.rows;
for (i = 1; i < allRows.length; i++) {
var row = allRows[i];
var id = row.cells[1].innerHTML;
var chkBox = row.cells[0].getElementsByTagName("input")[0];
if (id == selectedId) {
if (row != selectedRow) {
chkBox.checked = objRef.checked;
}
if (chkBox.checked) {
//If checked change color
row.style.backgroundColor = "orange";
} else {
//If not checked change back to original color
if (row.rowIndex % 2 == 0) {
//Alternating Row Color
row.style.backgroundColor = "#e3f0f1";
} else {
row.style.backgroundColor = "white";
}
}
}
}
//Get the reference of GridView
var GridView = selectedRow.parentNode;
//Get all input elements in Gridview
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++) {
//The First element is the Header Checkbox
var headerCheckBox = inputList[0];
//Based on all or none checkboxes
//are checked check/uncheck Header Checkbox
var checked = true;
if (inputList[i].type == "checkbox" && inputList[i] != headerCheckBox) {
if (!inputList[i].checked) {
checked = false;
break;
}
}
}
headerCheckBox.checked = checked;
}
function checkAll(objRef) {
var GridView = objRef.parentNode.parentNode.parentNode;
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++) {
//Get the Cell To find out ColumnIndex
var row = inputList[i].parentNode.parentNode;
if (inputList[i].type == "checkbox" && objRef != inputList[i]) {
if (objRef.checked) {
//If the header checkbox is checked, check all checkboxes and highlight all rows
row.style.backgroundColor = "orange";
inputList[i].checked = true;
} else {
//If the header checkbox is checked, uncheck all checkboxes and change rowcolor back to original
if (row.rowIndex % 2 == 0) {
//Alternating Row Color
row.style.backgroundColor = "#e3f0f1";
} else {
row.style.backgroundColor = "white";
}
inputList[i].checked = false;
}
}
}
}<table cellspacing="1" cellpadding="4" border="0" border="0" id="ctl00_ContentPlaceHolder_gvLedger" style="border-width:0px;width:100%;">
<tr class="TblHeaderStyle">
<th scope="col">
<input id="ctl00_ContentPlaceHolder_gvLedger_ctl01_checkAllGvLedger" type="checkbox" name="ctl00$ContentPlaceHolder$gvLedger$ctl01$checkAllGvLedger" onclick="checkAll(this);" />
</th>
<th scope="col">HOLDER_ID</th>
<th scope="col">HOLDER_DTL_ID</th>
<th scope="col">HOLDER_NO</th>
<th scope="col">HOLDER_NAME</th>
<th scope="col">ST_MV</th>
<th scope="col">RB_MV</th>
<th scope="col">MVMT</th>
<th scope="col">AMT</th>
<th scope="col">TX_DATE</th>
<th scope="col">STATUS</th>
<th scope="col">CD_BY</th>
<th scope="col">CD_TIME</th>
<th scope="col">RKS</th>
<th scope="col">STATUS_MAN</th>
<th scope="col">REFER_NO</th>
<th scope="col">BATCH_NO</th>
<th scope="col">FD_CODE</th>
<th scope="col">SW_TYPE</th>
<th scope="col">ST_MV_DTL</th>
<th scope="col">RB_MV_DTL</th>
<th scope="col">AMT_DTL</th>
<th scope="col">EXCHG_RATE</th>
<th scope="col">TRANS_AMT</th>
<th scope="col">TRANS_UNIT</th>
<th scope="col">N_UNIT</th>
<th scope="col">N_DATE</th>
<th scope="col">FD_PER</th>
<th scope="col">TRANS_NO</th>
<th scope="col">TL_SW_DONE</th>
<th scope="col">TT_TL_SW</th>
</tr>
<tr class="TblRowStyle">
<td align="center">
<input id="ctl00_ContentPlaceHolder_gvLedger_ctl02_chkThisGvLedger" type="checkbox" name="ctl00$ContentPlaceHolder$gvLedger$ctl02$chkThisGvLedger" onclick="Check_Click(this);" />
</td>
<td>2</td>
<td>3</td>
<td>0000001</td>
<td>MR ABC</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>10/7/2014</td>
<td>O</td>
<td> </td>
<td> </td>
<td>CV 201709</td>
<td>N</td>
<td>CVA_2</td>
<td>2</td>
<td>02</td>
<td>from</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>500</td>
<td>853.97</td>
<td>0.5855</td>
<td>10/07/2014</td>
<td>0</td>
<td> </td>
<td>2</td>
<td>0</td>
</tr>
<tr class="TblAlternateRowStyle">
<td align="center">
<input id="ctl00_ContentPlaceHolder_gvLedger_ctl03_chkThisGvLedger" type="checkbox" name="ctl00$ContentPlaceHolder$gvLedger$ctl03$chkThisGvLedger" onclick="Check_Click(this);" />
</td>
<td>2</td>
<td>4</td>
<td>0000001</td>
<td>MR ABC</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>10/7/2014</td>
<td>O</td>
<td> </td>
<td> </td>
<td>CV 201709</td>
<td>N</td>
<td>CVA_2</td>
<td>2</td>
<td>01</td>
<td>to</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>500</td>
<td>994.43</td>
<td>0.5028</td>
<td>10/07/2014</td>
<td>100</td>
<td>00007762</td>
<td>2</td>
<td>0</td>
</tr>
<tr class="TblAlternateRowStyle">
<td align="center">
<input id="ctl00_ContentPlaceHolder_gvLedger_ctl03_chkThisGvLedger" type="checkbox" name="ctl00$ContentPlaceHolder$gvLedger$ctl03$chkThisGvLedger" onclick="Check_Click(this);" />
</td>
<td>3</td>
<td>5</td>
<td>0000002</td>
<td>MR DEF</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>10/7/2014</td>
<td>O</td>
<td> </td>
<td> </td>
<td>CV 201709</td>
<td>N</td>
<td>CVA_2</td>
<td>2</td>
<td>01</td>
<td>to</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>500</td>
<td>994.43</td>
<td>0.5028</td>
<td>10/07/2014</td>
<td>100</td>
<td>00007763</td>
<td>2</td>
<td>0</td>
</tr>
</table>
<input type="submit" name="ctl00$ContentPlaceHolder$btnGenerate" value="Proceed >" onclick="return confirm('Are you sure you want to process selected transactions?');WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder$btnGenerateSwitching", "", true, "", "", false, false))"
id="ctl00_ContentPlaceHolder_btnGenerate" class="ButtonStyle" />