如何使用Jquery點擊td時將複選框標記爲選中狀態？

我有一個包含N個tr> td的表格，我有複選框有class =「hrchy-dt-checkboxes」，所以無論何時單擊該TD，都應該檢查該複選框。如何使用Jquery點擊td時將複選框標記爲選中狀態？

這裏是我的樣本HTML

<tr style="height:20.1pt;"><input disabled="disabled" value="" class="dt-checkboxes" id="row_2" type="checkbox"> 
    <td class="td_0_3">1<input disabled="disabled" value="" class="hrchy-dt-checkboxes" id="td_2" type="checkbox"></td> 
    <td class="td_0_1">A-1) Efectivo y otros activos líquidos equivalentes</td> 
    <td class="td_0_1">18063955860.200008</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
</tr> 
<tr style="height:20.1pt;"><input disabled="disabled" value="" class="dt-checkboxes" id="row_1" type="checkbox"> 
    <td class="td_0_3">&nbsp;<input disabled="disabled" value="" class="hrchy-dt-checkboxes" id="td_1" type="checkbox"></td> 
    <td class="td_0_1">ACTIVO: Total del Sector</td> 
    <td class="td_0_1">Importe</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
</tr>

UPDATE：

if(checkboxClass.indexOf('hrchy-dt-checkboxes')!=-1){ 
    $('.hrchy-dt-checkboxes:checked').each(function(i){ 
     var idAttr=$(this).attr('id'); 
     var selectedTDVal=$(this).parent().text(); 
     var indexVal=idAttr.substring(idAttr.indexOf('_'),idAttr.length); 
     indexVal=indexVal.replace('_',''); 
     var hrchyIndexId=parseInt(indexVal); 
     selectedVal[i]=selectedTDVal; 
     hrchyMap[hrchyIndexId]=selectedTDVal; 
    }); 
    selectedVal=[]; 
}

Fromo上面的代碼中，每當一個複選框，單擊將採取後端的價值。需要增強此代碼。

謝謝

來源

2017-08-14 eThan_hunT

你能分享一段代碼給我們嗎？ –

Hi @KARANLAGALWAR，我已更新請檢查 –

jQuery代碼：

$("td").on('click',function(){ 
     $("this").closest("tr").find(".hrchy-dt-checkboxes").attr('checked',true); 
    });

更新時間：

$("table").on('click', 'td', function() { 
    var currentRow = $(this).closest("tr"); 
    if (currentRow.find(".hrchy-dt-checkboxes").is(':checked')) { 
    currentRow.find(".hrchy-dt-checkboxes").prop("checked", false); 
    } else { 
    currentRow.find(".hrchy-dt-checkboxes").prop("checked", true); 
    } 
});

JS Fiddle Working Demo

另請參考：How to access table cell td in jQuery

來源

2017-08-17 06:30:15

謝謝你的代碼幫助我很多.. –

@eThan_hunT：你很歡迎 –

您可以使用下面的代碼來檢查複選框。不過，我不知道是否需要取消選中該複選框，以免添加。如果您需要，請告訴我。

// Code goes here 
$(document).ready(function() { 

$('.hrchy-dt-checkboxes').parent().parent().click(function(){ 
    var elem = this; 
    var chk = $(this).find('.hrchy-dt-checkboxes')[0]; 
    $(chk).prop('checked','checked'); 
}) 
});

這裏是plunker爲同一

更新：

這裏是更新的代碼來切換選擇：

$(document).ready(function() { 

$('.hrchy-dt-checkboxes').parent().parent().click(function(){ 
    var elem = this; 
    var chk = $(this).find('.hrchy-dt-checkboxes')[0]; 
    var isChecked = $(chk).prop('checked'); 
    $(chk).prop('checked',!isChecked); 

}) 
});

來源

2017-08-14 06:15:03

嗨，是的，我需要取消選擇選項，你能否提供我！ –

查看更新的代碼。我也更新了同樣的運動員。 –

希望這是你想要

什麼

$('td').click(function (event) { 
if (!$(event.target).is('input')) { 
    $('input:checkbox', this).prop('checked', function (i, value) { 
    return !value; 
    }); 
}

}）;

來源

2017-08-14 06:15:39

如何使用Jquery點擊td時將複選框標記爲選中狀態？

回答

相關問題