jQuery Check if Checkbox is Checked, then Add Value to Input Field

Question

I have a shopping cart checkout page and I'm trying to add a "gift" option. What needs to happen: Once the checkbox is selected for "Send Order As Gift", a value needs to be assigned to a hidden input field so that the information is moved onto the confirmation page and various receipts.

HTML:

<h3>Send Order As Gift</h3>
<ul>
    <li class="fc_row fc_gift"><label for="gift" class="fc_pre">This is a gift, 
    please do not include a receipt.</label>
    <input type="checkbox" name="gift" id="gift" class="checkbox" value="" />
    <input type="hidden" name="Gift" id="gift-true" value="" /></li>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#gift-true").input( $('#edit-checkbox-id').is(':checked').val() + "Yes"); 
    });                
    </script>
    </li>
    <li class="fc_row fc_gift_message"><label for="Gift Message">Include a message 
    (limit 100 characters):</label>
    <textarea name="Gift Message" cols="50" rows="3" maxlength="100"></textarea>
    </li>
</ul>

Sebastian vom Meer · Accepted Answer · 2012-08-16 09:11:59Z

11

You have to update your hidden field whenever the checkbox is changed:

$(function(){
    $('#gift').change(function() {
        $("#gift-true").val(($(this).is(':checked')) ? "yes" : "no");
    });
});

edited Aug 16, 2012 at 9:11

answered Aug 15, 2012 at 20:18

Sebastian vom Meer

5,2442 gold badges31 silver badges37 bronze badges

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

3 Comments

Sebastian vom Meer Over a year ago

Just a copy from the question above. $('#gift') should do it.

RevConcept Over a year ago

Great! This worked perfectly for me. I changed one thing (let me know if you foresee an issue with this): $("#gift-true").val(($(this).is(':checked')) ? "yes" : ""); I need "no" to be blank, because if there is any value in the input it moves to the receipt and I don't want shoppers seeing "Gift: no" since there is no need.

Sebastian vom Meer Over a year ago

Fine. There shouldn't be any issues using "" instead of "no".

nbrooks · Accepted Answer · 2012-08-15 20:24:02Z

Use jQuery .val() to set the value of the input element. jquery .is() returns a boolean value, so you will have to check if it is true (using an if statement or a ternary operator like below), then conditionally update the value. Also, you should update this value whenever the box is selected/unselected:

$(document).ready(function(){
    $('#edit-checkbox-id').change(function() {
        $("#gift-true").val( this.checked ? "Yes" : "" );
    }
});

Also, if your checkbox is:

<input type="checkbox" name="gift" id="gift" class="checkbox" value="" />

The appropriate id-selector is $('#gift'), not ~~$('#edit-checkbox-id')~~

ShankarSangoli · Accepted Answer · 2012-08-15 20:16:22Z

0

$('#edit-checkbox-id').is(':checked') returns a boolean value true/false based on checkbox state. So you should use it as a condition and decide what to set the the value using val jQuery method. Try this.

$("#gift-true").val( $('#edit-checkbox-id').is(':checked') ? "Yes": "No" );

answered Aug 15, 2012 at 20:16

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Comments

csharp · Accepted Answer · 2012-08-15 20:26:11Z

0

you can use CSS Pseudo-classe for example :

var checked=$('input[id="#gift-true"]:checked').length;
var isTrue=false;
if(checked)
    isTrue=true;
else
    isTrue=false;

answered Aug 15, 2012 at 20:26

csharp

594 bronze badges

Collectives™ on Stack Overflow

jQuery Check if Checkbox is Checked, then Add Value to Input Field

4 Answers 4

3 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Related