Why is my jQuery if/else if statement not working?

Question

The syntax appears to be correct to me, but only the "if" statement functions. I have even tried with just a simple if/else statement and only the "if" statement functions that way as well. What am I doing wrong? I have seen similar questions on SO as well, but they did not answer my question because when I tried to use their corrections in my case, it still didn't work.

HTML

<table>
  <tr>
    <td><input type="checkbox" value="test" /></td>
    <td><a class="clickme" href="#">edit</a></td>
  </tr>
</table>

JS

$('.clickme').click(function () {
    if ($(this).closest('td').prev().find('input[type=checkbox]').prop('checked', false)) {
        $(this).closest('td').prev().find('input[type=checkbox]').prop('checked', true);
        console.log('Test2');
    } else if ($(this).closest('td').prev().find('input[type=checkbox]').prop('checked', true)) {
        $(this).closest('td').prev().find('input[type=checkbox]').prop('checked', false);
        console.log('Test');
    }
});

$('.clickme').click(function () {
if ($(this).closest('td').prev().find('input[type=checkbox]').prop('checked', false)) {
    $(this).closest('td').prev().find('input[type=checkbox]').prop('checked', true);
    console.log('Test2');} else if ($(this).closest('td').prev().find('input[type=checkbox]').prop('checked', true)) {
    $(this).closest('td').prev().find('input[type=checkbox]').prop('checked', false);
    console.log('Test');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="checkbox" value="test" /></td>
    <td><a class="clickme" href="#">edit</a></td>
  </tr>
</table>

What are you trying to accomplish here? It looks like you want to toggle the checkbox when the label is clicked, is that all? — JHeth
– JHeth, Commented Aug 9, 2020 at 2:18
you have been given the answers. please choose one of the many and check the box to the left of the answer. — s.kuznetsov
– s.kuznetsov, Commented Aug 9, 2020 at 2:54

s.kuznetsov · Accepted Answer · 2020-08-09 02:21:55Z

1

your condition is structured correctly, except for comparison with the current value true or false

$('.clickme').click(function () {
if ($(this).closest('td').prev().find('input[type=checkbox]').prop('checked') == false) {
    $(this).closest('td').prev().find('input[type=checkbox]').prop('checked', true);
    console.log('Test2');} else 
    if ($(this).closest('td').prev().find('input[type=checkbox]').prop('checked') == true) {
    $(this).closest('td').prev().find('input[type=checkbox]').prop('checked', false);
    console.log('Test');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="checkbox" value="test" /></td>
    <td><a class="clickme" href="#">edit</a></td>
  </tr>
</table>

answered Aug 9, 2020 at 2:21

s.kuznetsov

15.3k3 gold badges12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Emre Koc · Accepted Answer · 2020-08-09 02:24:39Z

1

Youre not checking the checked, but setting it:

// This part sets the prop checked to false
if ($(this).closest('td').prev().find('input[type=checkbox]').prop('checked', false)) {

// This would check if it is false
if ($(this).closest('td').prev().find('input[type=checkbox]').prop('checked') === false) {

Also, you can just use } else {; no need to check if its true, because thats what the else will do if the if is false.

answered Aug 9, 2020 at 2:24

Emre Koc

1,58811 silver badges22 bronze badges

Comments

JHeth · Accepted Answer · 2020-08-09 02:31:36Z

From the code it looks like you just want to toggle the checkbox when the label click me is clicked. No need for Javascript or JQuery at all. You can just wrap the input in a label tag and put your clickable text after the checkbox input and it will work when the label is clicked.

If you need a function to run when the checkbox is toggled it will be easier doing it from the change event of the checkbox than using 2 separate objects as toggles.

$(".checkbox").change(function() {
    if(this.checked) {
        console.log('fires when checked == true')
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
    <label>
    <input type="checkbox" class="checkbox"/>
    click me
    </label>
    </td>
  </tr>
</table>

Sleek Geek · Accepted Answer · 2020-08-09 04:15:38Z

First of all, you are overthinking it. I do not see the need of having to trigger the action for an input field from another TD with a link. That is not semantic and it just adds to the size of your document unnecessarily. I would handle it as shown below.

$(function () {

$(".checkbox").change(function() {

  if ($(this).is(':checked')) {
 
      // Take initial action if checked
      $(this).parents("td").find(".content").attr("contentEditable", true).focus();

    } else {

      // Take reverse action if unchecked
      $(this).parents("td").find(".content").attr("contentEditable", false).blur();

    }


});
});

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

      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce faucibus pulvinar nulla. Curabitur ultricies eleifend ante, porttitor elementum dui bibendum vel. Cras convallis nibh quis ipsum pulvinar, eget vulputate enim semper. Praesent rutrum
        nisl enim, ac suscipit urna posuere at. In id purus enim. Aenean ut tempus diam, sit amet pulvinar diam. Quisque purus lorem, condimentum non nibh sed, elementum faucibus tellus. Nulla pulvinar ligula eget ipsum finibus feugiat. Praesent placerat
        orci id metus facilisis, id euismod augue euismod. Vestibulum imperdiet neque vel eros scelerisque pharetra. Aliquam erat volutpat.</div>
        
        <br>

      <label>
    <input type="checkbox" class="checkbox"/>
    Edit
    </label>

    </td>
  </tr>

</table>

Collectives™ on Stack Overflow

Why is my jQuery if/else if statement not working?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related