set checkbox checked when input is not empty

Question

i have list of items, i need to set checkbox checked value to true when price input is empty, and to false when it's not.

<td><input type="text" value="" class="name"></td>
<td><input type="text" value="" class="producer"></td>
<td><input type="text" value="" class="model"></td>
<td><input type="text" value="" class="dateOf"></td>
<td><input type="text" value="" class="color"></td>
<td><input type="text" value="" class="price"></td>

Edit:

<td><input type="checkbox" class="checkbox"></td>

and there is my jquery function :

$(function() {
    $('.price').on('input', function() {
        if (!$('.price').val()) {
            $(this).closest('td').next().find('.checkbox').prop("checked", true);
        }else{
             $(this).closest('td').next().find('.checkbox').prop("checked", false);
        }

    });
});

the problem is that it works only for first "price" input, how to make it work for all ?

Where is checkbox? Please don't tell me that IDs are not unique — Satpal
– Satpal, Commented Jan 28, 2014 at 21:14
Please read the jQuery tutorial about basic event handling: "In addition to the event object, the event handling function also has access to the DOM element that the handler was bound to via the keyword this. To turn the DOM element into a jQuery object that we can use jQuery methods on, we simply do $( this )". Tutorials are great, they help a lot! You should read them! — Felix Kling
– Felix Kling, Commented Jan 28, 2014 at 21:17
To reduce the code a bit you could write: $(this).closest('td').next().find('.checkbox').prop("checked", !$(this).val()); (and remove the if/else statement) — Streamside
– Streamside, Commented Jan 28, 2014 at 21:17
to my shame ids are not unique indeed, i've removed them -_- — DeadKennedy
– DeadKennedy, Commented Jan 28, 2014 at 21:28

Venkata Krishna · Accepted Answer · 2014-01-28 21:21:01Z

2

Use this keyword

if (!$(this).val()) {

instead of

if (!$('.price').val())

If there are multiple inputs with the class price, the keyword this will handle the event for the specific input .price you are changing.

edited Jan 28, 2014 at 21:21

answered Jan 28, 2014 at 21:14

Venkata Krishna

15.2k5 gold badges45 silver badges57 bronze badges

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

3 Comments

James Over a year ago

Using the class selector would still work if there wasn't another issue though, wouldn't it?

Felix Kling Over a year ago

@James: .val will always return the value of the first selected element. So the only other "issue" there is is that there are multiple elements with that class.

James Over a year ago

Very true. Didn't think of multiple prices.

James · Accepted Answer · 2014-01-28 21:19:28Z

1

Try

$('.price').keyup(function () { 
    $(this).closest('td').next().find('.checkbox').prop("checked", !$(this).val());
});

answered Jan 28, 2014 at 21:19

James

3,8056 gold badges51 silver badges81 bronze badges

Collectives™ on Stack Overflow

set checkbox checked when input is not empty

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related