Zunair Nawaz Zunair Nawaz - 3 years ago 233
ASP.NET (C#) Question

check and uncheck checkbox when click on label through jQuery

I want simple toggle type button. I got it but have some problem. on click label check box checked but unable to check remaining checkbox. I used class because I have unknown number of check box through asp repeater.

my HTML is

enter code here




$(".labcbox").click(function () {
var selectedIndex = $('.labcbox').index($(this));
if ($(".toggin").is(':checked')) {
$(".toggin")[selectedIndex].checked = false;
}
else {
$(".toggin")[selectedIndex].checked = true;
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>CheckBox toggle</td>
<td>
<input type="checkbox" class="toggin" />
<label class="labcbox"></label>
<div class="divmark">
Hypertention
</div>
</td>
</tr>
<tr>
<td>CheckBox toggle</td>
<td>
<input type="checkbox" class="toggin" />
<label class="labcbox"></label>
<div class="divmark">
Hypertention
</div>
</td>
</tr>
</table>




Answer Source

Here you go with a solution https://jsfiddle.net/pLq5ep80/

$(".labcbox").click(function () {
  $(this).siblings('input.toggin').prop('checked', !$(this).siblings('input.toggin').is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>CheckBox toggle</td>
    <td>
      <input type="checkbox" class="toggin" />
      <label class="labcbox">Checkbox 1</label>
      <div class="divmark">
        Hypertention
      </div>
    </td>
  </tr>
  <tr>
    <td>CheckBox toggle</td>
    <td>
      <input type="checkbox" class="toggin" />
      <label class="labcbox">Checkbox 2</label>
      <div class="divmark">
        Hypertention
      </div>
    </td>
  </tr>
</table>

Hope this will help you.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download