为什么我的 jQuery if/else if 语句不起作用？

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>

Answer 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>

Answer 2

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 .

Answer 3

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>

Answer 4

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>