Jquery changing hidden input value when a checkbox is checked and reverse when unchecked?

Question

I am using Jquery to change the value of a hidden input to True when the user checks a checkbox in a different form field. It looks like this:

$(function(){
    $('.year').click(function(){
        $('#carsearch').val('True');
    });

It works great except if the user changes their mind and unchecks the box, the hidden input keeps the value of True. I want to make it so that if they change their mind and uncheck the .year input that it changes the value of #carsearch back to False.

I would really appreciate any input on how this is accomplished.

John Green · Accepted Answer · 2012-03-15 00:26:11Z

7

$('.year').click(function(){
    $('#carsearch').val( $(this).is(':checked') ? 'True' : 'False' );
})

You might be better off listening to 'change' instead of 'click' though.

answered Mar 15, 2012 at 0:26

John Green

13.5k3 gold badges31 silver badges52 bronze badges

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

5 Comments

Jasper Over a year ago

Remember that this.checked is the same thing as $(this).is(':checked') and requires no jQuery overhead.

Rookieatthis Over a year ago

Worked like a charm. Thanks a million John!

John Green Over a year ago

@Jasper -While at the same time, dealing with the DOM objects directly destroys the abstraction layer and is a really bad way to interact with the code. If one of my devs checked in that code I'd reject it and have him fix it.

Jasper Over a year ago

@JohnGreen-PageSpike Could you expand on dealing with the DOM objects directly destroys the abstraction layer? I don't quite follow. What does not using .val() break? Thanks for your reply in advance.

John Green Over a year ago

jQuery acts as an abstraction layer for the DOM. With it, there should be few, if any reasons to ever deal directly with any DOM object. By going directly to the object and querying its 'checked' property, you're mixing apples (jquery abstracted object) with oranges (vanilla object). It'd take me half a book to explain all of the reasons that this is bad practice, and really... the currently implementation of the sizzle engine just looks for 'elem.checked === true'. That being said... things change, and I know I'd rather have jQuery stay up to date on iterative DOM & quirks than myself.

Austin Brunkhorst · Accepted Answer · 2012-03-15 00:30:58Z

1

Try this.

$('.year').click(function(){
    $('#carsearch').val( this.checked ? 'True' : '' );
});

Edited based off of Jasper's suggestion.

Assuming that True is the value for checked and empty if not.

This is called the ternary operator, more information on it can be found here - http://en.wikipedia.org/wiki/Ternary_operation

edited Mar 15, 2012 at 0:30

answered Mar 15, 2012 at 0:25

Austin Brunkhorst

21.1k6 gold badges49 silver badges61 bronze badges

1 Comment

Jasper Over a year ago

+1, but you could make this faster by changing $(this).is(':checked') to: this.checked.

Collectives™ on Stack Overflow

Jquery changing hidden input value when a checkbox is checked and reverse when unchecked?

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related