选中复选框时删除链接

Question

I have a table with Datatable plugin, and I did the part when the user clicks on the row ( tr ) that he will be redirected to that link. but i don't want the user to be redirected to the link when he clicks the checkbox on the row. Here is the html:

 <tr class="odd gradeX">
   <td class="number_elem_lang">
      <label class='with-square-checkbox2-mylist-details'>
      <input type='checkbox'>
      <span></span>
      </label>
   </td>
   <td class=""> ID022ox</td>
   <td class="list-name">First Lipsum List</td>
   <td class=""> 22 Candidates</td>
   <td class="">01 Apr 2016</td>
   <td><a href=""></a></td>
</tr>

Here is my javascript code for redirecting the user to the link when it's clicked:

$('#sample_1').on( 'click', 'tr', function() {
  var $a = $(this).find('a').last();
  if ( $a.length )
     window.location = $a.attr('href');
  } );

So i don't want to redirect the user when the checkbox is clicked, pls help :)

Thank you

Answer 1

You can use e.target to check what element the user clicked on. In the example below, we check if the user clicked on an input of type checkbox . Then we don't run the rest of the function.

 $('table').on( 'click', 'tr', function(e) { var target = $(e.target); debugger; // For debugging purposes. if (target.is('input[type=checkbox]')) { // Do not continue if it's an input console.log('no redirect'); return true; } console.log('do redirect'); var $a = $(this).find('a').last(); if ( $a.length ) window.location = $a.attr('href'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr class="odd gradeX"> <td class="number_elem_lang"> <label class='with-square-checkbox2-mylist-details'> <input type='checkbox'> <span></span> </label> </td> <td class=""> ID022ox</td> <td class="list-name">First Lipsum List</td> <td class=""> 22 Candidates</td> <td class="">01 Apr 2016</td> <td><a href=""></a></td> </tr> </table> 

Update:

In this particular case the checkbox had some custom styling, which led to e.target being a span . The solution is to change the condition to $(e.target).is('span') , or even better set a class on the span and use $(e.target).hasClass('my-custom-checkbox') .

Answer 2

Here you go - Add this to cancel the event when the checkbox is clicked:

 $("tr input:checkbox").click(function(event) {
     event.stopPropagation();
     // Do something
 });

Here is a working Demo

 $('table').on('click', 'tr', function() { var $a = $(this).find('a').last(); if ($a.length) alert("fsfsd"); }); $("tr input:checkbox").click(function(event) { event.stopPropagation(); // Do something }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr class="odd gradeX"> <td class="number_elem_lang"> <label class='with-square-checkbox2-mylist-details'> <input type='checkbox'> <span></span> </label> </td> <td class="">ID022ox</td> <td class="list-name">First Lipsum List</td> <td class="">22 Candidates</td> <td class="">01 Apr 2016</td> <td> <a href=""></a> </td> </tr> </table> 

Answer 3

Use the if construction

if ($('input.checkbox_check').is(':checked')) {
...
}

Answer 4

 Add a class named yourradio in your radio button and add this javascript 
<label class='with-square-checkbox2-mylist-details'>
      <input type='checkbox' class="yourradio">
      <span></span>
      </label> 
<script>
$('.yourradio').on('click', function(){
 return false;
});