Trigger a click on previous sibling with Jquery

Question

I would like to trigger a click on a checkbox when the text next to the checkbox is clicked ("Finance department" or "Sales department" in the snippet).

I have tried with both jquery and javascript but any of those two seem to work:

$(prevsibling).children().click();
$(prevsibling).children().trigger("click");

Please find attached a snippet with the code.

Any clue ?

Thanks a lot

$(document).mouseup(function(e) {

  clickeditem = $(e.target);

  if (clickeditem.hasClass('checkboxinfotd')) {
    prevsibling = $(clickeditem).prev()[0];
    $(prevsibling).children().click();

  } else if (clickeditem.hasClass('checkboxtd') || clickeditem.hasClass('checkbutton')) {
    if (clickeditem.hasClass('checkboxtd')) {
      clickeditem = clickeditem.children()[0];
    } else if (clickeditem.hasClass('checkbutton')) {

    } else {

    }

    console.log("clicked on checkbox");
    thirdclass = clickeditem.attr('class').split(' ')[2];

    if (thirdclass === "fa-square-o") {
      newclass = 'fa-check-square-o';
      clickeditem.removeClass("fa-square-o");
      clickeditem.addClass(newclass);

    } else if (thirdclass === "fa-check-square-o") {
      newclass = 'fa-square-o';
      clickeditem.removeClass("fa-check-square-o");
      clickeditem.addClass(newclass)
    }
  };
});

.checkboxinfotd {
  cursor: pointer;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Table id="belowtable">
  <tbody class="scenariotbody">
    <TR>
      <TD colspan="2">
        Text
      </TD>
    </TR>
    <TR>
      <TD class="checkboxtd"><i class="checkbutton fa fa-square-o" aria-hidden="true" id="plan-282"></i>
      </TD>
      <TD class="checkboxinfotd">Finance department</TD>
    </TR>
    <TR>
      <TD class="checkboxtd"><i class="checkbutton fa fa-square-o" aria-hidden="true" id="plan-289"></i>
      </TD>
      <TD class="checkboxinfotd">Sales department</TD>
    </TR>
  </tbody>
</Table>

Mark Baijens · Accepted Answer · 2021-04-26 11:15:35Z

You can achieve what you want by using: clickeditem.closest('tr').find('.checkbutton').trigger('mouseup');

This code finds the table row parent. Inside the parent it looks for the element with the checkbutton class and triggers the mouseup event (your code is bound to mouseup not click)

As others already stated it might be wise to abonden the idea of using font awsome for checkboxes and use the html input and label elements instead and style those with css. This will make your life a lot easier handling your inputs.

$(document).mouseup(function(e) {

  clickeditem = $(e.target);

  if (clickeditem.hasClass('checkboxinfotd')) {
    clickeditem.closest('tr').find('.checkbutton').trigger('mouseup');

  } else if (clickeditem.hasClass('checkboxtd') || clickeditem.hasClass('checkbutton')) {
    if (clickeditem.hasClass('checkboxtd')) {
      clickeditem = clickeditem.children()[0];
    } else if (clickeditem.hasClass('checkbutton')) {

    } else {

    }

    console.log("clicked on checkbox");
    thirdclass = clickeditem.attr('class').split(' ')[2];

    if (thirdclass === "fa-square-o") {
      newclass = 'fa-check-square-o';
      clickeditem.removeClass("fa-square-o");
      clickeditem.addClass(newclass);

    } else if (thirdclass === "fa-check-square-o") {
      newclass = 'fa-square-o';
      clickeditem.removeClass("fa-check-square-o");
      clickeditem.addClass(newclass)
    }
  };
});

.checkboxinfotd {
  cursor: pointer;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Table id="belowtable">
  <tbody class="scenariotbody">
    <TR>
      <TD colspan="2">
        Text
      </TD>
    </TR>
    <TR>
      <TD class="checkboxtd"><i class="checkbutton fa fa-square-o" aria-hidden="true" id="plan-282"></i>
      </TD>
      <TD class="checkboxinfotd">Finance department</TD>
      <TD class="checkboxinfotd">Sales department</TD>
    </TR>
  </tbody>
</Table>

Hi Mark. Thanks a lot for your answer and comments. Well noted for your proposition. I will try to stick to labels next time.

Shahidul Islam · Accepted Answer · 2021-04-26 11:06:13Z

Your question is not clear completely. Would you trigger the checkbox by click on the text on the right side? If yes, please use label.

/* Control the label position from here */
.control {
    font-family: inherit;
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 5px;
    padding-top: 5px;
    cursor: pointer;
    font-size: inherit;
}
    .control input {
        position: absolute;
        z-index: -1;
        opacity: 0;
    }
.control_indicator {
    position: absolute;
    top: 3px;
    left: 0;
    height: 20px;
    width: 20px;
    background: #008736;
    border: 0px solid #000000;
    border-radius: 0px;
}
.control:hover input ~ .control_indicator,
.control input:focus ~ .control_indicator {
    background: #cccccc;
}

.control input:checked ~ .control_indicator {
    background: #008736;
}
.control:hover input:not([disabled]):checked ~ .control_indicator,
.control input:checked:focus ~ .control_indicator {
    background: #008736;
}
.control input:disabled ~ .control_indicator {
    background: #008736;
    opacity: 0.6;
    pointer-events: none;
}
.control_indicator:after {
    box-sizing: unset;
    content: '';
    position: absolute;
    display: none;
}
.control input:checked ~ .control_indicator:after {
    display: block;
}
.control-checkbox .control_indicator:after {
    left: 8px;
    top: 4px;
    width: 3px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.control-checkbox input:disabled ~ .control_indicator:after {
    border-color: #008736;
}
.control-checkbox .control_indicator::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 4.5rem;
    height: 4.5rem;
    margin-left: -1.3rem;
    margin-top: -1.3rem;
    background: #008736;
    border-radius: 3rem;
    opacity: 0.6;
    z-index: 99999;
    transform: scale(0);
}

/* The ripple effect  */
@keyframes s-ripple {
    0% {
        transform: scale(0);
    }
    20% {
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}
@keyframes s-ripple-dup {
   0% {
       transform: scale(0);
    }
   30% {
        transform: scale(1);
    }
    60% {
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}
.control-checkbox input + .control_indicator::before {
    animation: s-ripple 250ms ease-out;
}
.control-checkbox input:checked + .control_indicator::before {
    animation-name: s-ripple-dup;
}

<label><input type="checkbox" value="">Option 1</label>

<div class="control-group">
    <label class="control control-checkbox">
        label
            <input type="checkbox" checked="checked" />
        <div class="control_indicator"></div>
    </label>
</div>

Hello, Please use checkboxs instead of fontawesome. Fontawesome is not appropriate for this kind of work. I added s example with the style of the checkbox.

Mark Schultheiss · Accepted Answer · 2021-04-26 12:15:32Z

I think what you ultimatly want is to see the fake "checkbox" check/uncheck so I gave an example of toggling that class pair no matter where on the row you click.

$('#belowtable')
  .on('click', '.checkboxinfotd', function(e) {
    let clickeditem = $(this)
    let myparent = clickeditem.closest('tr')
      .find('.checkboxtd')
      .trigger('click');
  }).on('click', '.checkboxtd', function(e) {
    let clickeditem = $(this);
    let cb = clickeditem.find('.checkbutton.fa');
    cb.toggleClass('fa-square-o').toggleClass('fa-check-square');
  });

.checkboxinfotd {
  cursor: pointer;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="belowtable">
  <tbody class="scenariotbody">
    <tr>
      <td colspan="2">
        Text
      </td>
    </tr>
    <tr>
      <td class="checkboxtd"><i class="checkbutton fa fa-square-o" aria-hidden="true" id="plan-282"></i>
      </td>
      <td class="checkboxinfotd">Finance department</td>
    </tr>
    <tr>
      <td class="checkboxtd"><i class="checkbutton fa fa-square-o" aria-hidden="true" id="plan-289"></i>
      </td>
      <td class="checkboxinfotd">Sales department</td>
    </tr>
  </tbody>
</table>

Collectives™ on Stack Overflow

Trigger a click on previous sibling with Jquery

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related