Change the hidden name by checking checkbox using Jquery

Question

When i click the checkbox the corresponding hidden value of the checkbox should be remove or the name of hidden input field to be change using jquery or JavaScript.

HTML :

   <tr>
    <td><input type="checkbox" value="noseat" id="seat" name="seat[]" onclick="return oncl(this);">
          Check&nbsp;&nbsp;
          <input type="hidden" value="off" name="seat[]" class="hiddensesat">         
        </td>
        <td><input type="checkbox" value="noseat" id="seat" name="seat[]" onclick="return oncl(this);">
          Check&nbsp;&nbsp;
          <input type="hidden" value="off" name="seat[]" class="hiddensesat">         
        </td>
        <td><input type="checkbox" value="noseat" id="seat" name="seat[]" onclick="return oncl(this);">
          Check&nbsp;&nbsp;
          <input type="hidden" value="off" name="seat[]" class="hiddensesat">         
        </td>
      </tr>

JS :

function oncl(){
  alert($(this).is(':checked'));
  if($(this).is(':checked')){
        alert($(this).closest('td').find(".hiddensesat").val());
    }
}

The alert always showing false;

Answer 1

You are passing the clicked element reference as a argument so you need to change the function definition to accept a parameter and use it instead of using this inside the function.

function oncl(el) {
    alert(el.checked);
    $(el).closest('td').find(".hiddensesat").val(el.checked ? 'on' : 'off')
}

---

As a side note, I would recommend using jQuery event handlers instead of inline ones, like

//dom ready handler
jQuery(function () {
    //change event handler for checkbox elements with name seat[]
    $('input[type="checkbox"][name="seat[]"]').change(function () {
        $(this).closest('td').find(".hiddensesat").val(this.checked ? 'on' : 'off')
    });
})