Make table cell clickable with jQuery

Question

I have a small Quiz on a webpage with a table of questions. In each row are two possible answers, each has its own radio button for selection. Now my Problem, i want to make the whole cell clickable and not just the Radio button.

This is the code i came up with, but it only works once per radio button. After the first click, i have to click multiple times to switch the selection.

jQuery(".clickable").click(function(event) {
    var x = jQuery("input", this).attr("checked");
    jQuery("input", this).attr("checked", !x);
    return false;
});

Here is a sample row

<tr class="row_cls" id="quiz_row0">
    <td class="clickable" style="border:1px solid #ddd;vertical-align: middle;padding-top:10px;padding-bottom:10px;padding-left:10px;">
        <label style="margin-bottom:0px;">
            <input type="radio" style="height:20px; width:20px;" class="radio-form-control radio_input1" id="radio_input166" name="quiz_row0" value="Herausforderung" checked="checked"> 
            <span style="font-size: 20px;">Herausforderung</span>
        </label></td>
    <td class="clickable" style="border:1px solid #ddd;vertical-align: middle;padding-top:10px;padding-bottom:10px;padding-left:10px;">
        <label style="margin-bottom:0px;">
            <input type="radio" style="height:20px; width:20px;" class="radio-form-control radio_input1" id="radio_input118" name="quiz_row0" value="Macht/ Aufstieg" checked="checked"> 
            <span style="font-size: 20px;">Macht/ Aufstieg</span>
        </label></td>
</tr>

I would be really grateful for suggestions!

You have paste wrong code.input", this).attr("checked", !x); have no sense. — Simone Rossaini
– Simone Rossaini, Commented Jul 20, 2022 at 7:00
Does this answer your question? Click td, select radio button in jQuery — Don't Panic
– Don't Panic, Commented Jul 20, 2022 at 8:27

Simone Rossaini · Accepted Answer · 2022-07-20 07:39:28Z

You need to use .each for all two class like:

$( ".clickable" ).each(function( index ) {
  $(this).click(function(event) {
    var x = jQuery("input", this).attr("checked");
    jQuery("input", this).attr("checked", !x);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>

  <tr class="row_cls" id="quiz_row0">
    <td class="clickable" style="border:1px solid #ddd;vertical-align: middle;padding-top:10px;padding-bottom:10px;padding-left:10px;">
      <label style="margin-bottom:0px;">
            <input type="radio" style="height:20px; width:20px;" class="radio-form-control radio_input1" id="radio_input166" name="quiz_row0" value="Herausforderung" checked="checked"> 
            <span style="font-size: 20px;">Herausforderung</span>
        </label></td>
    <td class="clickable" style="border:1px solid #ddd;vertical-align: middle;padding-top:10px;padding-bottom:10px;padding-left:10px;">
      <label style="margin-bottom:0px;">
            <input type="radio" style="height:20px; width:20px;" class="radio-form-control radio_input1" id="radio_input118" name="quiz_row0" value="Macht/ Aufstieg" checked="checked"> 
            <span style="font-size: 20px;">Macht/ Aufstieg</span>
        </label></td>
  </tr>
</table>

Pure js solution:

document.querySelectorAll('.clickable').forEach(el => {
  el.addEventListener('click', () => {
    el.querySelector('input').checked = true;
  });
});

<table>
  <tr class="row_cls" id="quiz_row0">
    <td class="clickable" style="border:1px solid #ddd;vertical-align: middle;padding-top:10px;padding-bottom:10px;padding-left:10px;">
      <label style="margin-bottom:0px;">
            <input type="radio" style="height:20px; width:20px;" class="radio-form-control radio_input1" id="radio_input166" name="quiz_row0" value="Herausforderung" checked="checked"> 
            <span style="font-size: 20px;">Herausforderung</span>
        </label></td>
    <td class="clickable" style="border:1px solid #ddd;vertical-align: middle;padding-top:10px;padding-bottom:10px;padding-left:10px;">
      <label style="margin-bottom:0px;">
            <input type="radio" style="height:20px; width:20px;" class="radio-form-control radio_input1" id="radio_input118" name="quiz_row0" value="Macht/ Aufstieg" checked="checked"> 
            <span style="font-size: 20px;">Macht/ Aufstieg</span>
        </label></td>
  </tr>
</table>

Your jQuery version shows the same behaviour as mine, might be some other parts of my code that are at fault. The pure JS version works great!

David Thomas · Accepted Answer · 2022-07-20 08:24:18Z

You don't need to use jQuery – or JavaScript of any kind – to "make the whole cell clickable," all you have to do is use CSS to have the <label> element fill the whole of the cell. One approach is below, with explanatory comments in the CSS:

/* copied the CSS from the relevant elements' "style"
   attribute into the CSS below: */
td.clickable {
  border: 1px solid #ddd;
  vertical-align: middle;
  /* removed the padding from the <td> and applied
     it to the <label> child element in order that
     the <label> could extend to the edges of its
     parent <td> (this element) */
}

label {
  /* by default causes the <label> to take the full
     width of its parent: */
  display: block;
  /* removes any margin that might move the <label>
     from the edges of its parents borders: */
  margin: 0;
  /* padding applied to the <label> instead of the
     parent <td>, in order to preserve spacing
     and aesthetics, but keeping the <label>
     positioned against all edges of the parent: */
  padding-block: 10px;
  padding-inline: 10px;
}

td.clickable input {
  height: 20px;
  width: 20px;
}

td.clickable span {
  font-size: 20px;
}

<table>
  <tbody>
    <tr class="row_cls" id="quiz_row0">
      <!-- I moved the inline CSS from the "style" attributes into the CSS pane, on the right;
           this makes it easier to modify the design and makes the HTML easier to read and
           understand: -->
      <td class="clickable">
        <label>
          <!-- I've modified your <input> elements; in your original code they both had the
               "checked" attribute, but as they share the same "name" only one could ever
               be active, or "checked." With that in mind I removed the attribute from the
               second of <input> elements, so the first <input> is checked by default: -->
          <input type="radio" class="radio-form-control radio_input1" id="radio_input166" name="quiz_row0" value="Herausforderung" checked="checked">
          <span>Herausforderung</span>
        </label></td>
      <td class="clickable">
        <label>
          <input type="radio" class="radio-form-control radio_input1" id="radio_input118" name="quiz_row0" value="Macht/ Aufstieg">
          <span>Macht/ Aufstieg</span>
        </label></td>
    </tr>
  </tbody>
</table>

Ash0ur · Accepted Answer · 2022-07-20 07:31:37Z

0

You need to use event.currentTarget to make sure you always target the clickable parent row no matter the user clicks on inside the row. then use .find() to get the input field inside the clicked row.

jQuery(".clickable").on( 'click', function(event) {
    let clickable = jQuery(event.currentTarget);
    let radioInput = clickable.find('.radio_input1');
    radioInput.prop("checked", true );
});

answered Jul 20, 2022 at 7:31

Ash0ur

1,5552 gold badges9 silver badges13 bronze badges

3 Comments

Roko C. Buljan Over a year ago

not true for jQuery. The this is used instead, at least if not inside an arrow function.

Ash0ur Over a year ago

well. It's the same thing. why not true for jQuery? api.jquery.com/event.currenttarget

Roko C. Buljan Over a year ago

Not that it's wrong, your statement is not exact. Since instead of event.currentTarget you can simply use simply this.

Collectives™ on Stack Overflow

Make table cell clickable with jQuery

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related