CODEWITHSUNDEEP
jquery
eThan_hunT
eThan_hunT

Reputation: 244

How to mark checkbox as checked whenever the td is clicked using Jquery?

I have a table containing N number of tr > td , I have Checkboxes of having class="hrchy-dt-checkboxes", So whenever I click that TD, The checkbox should be checked.

Here is my sample 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 the above code, Whenever a checkbox is clicked the value will be taken to backend. Need enhancement on this Code.

Thanks

Upvotes: 3

Views: 1391

Answers (3)

Satinder singh
Satinder singh

Reputation: 10198

jQuery Code: Mark checkbox as checked

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

Updated :

Added condition if the checkbox is already checked, then marked as unchecked else checked. Using .is(":checked") we get the checkbox status.

$("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);
  }
});

DEMO: JS Fiddle

Upvotes: 1

Manprit Singh Sahota
Manprit Singh Sahota

Reputation: 1339

You can use below code to check the checkbox. However I don't know if you need to uncheck the checkbox also so not adding that. Do let me know if you need it.

// 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');
})  
});

Here is the plunker for the same

Update:

Here is the updated code to toggle selection:

$( 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);  

})  
});

Upvotes: 2

Dmytro Lishtvan
Dmytro Lishtvan

Reputation: 808

hope this is what you want

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

});

Upvotes: 1

Related Questions