jQuery检查复选框是否被选中，然后将值添加到输入字段答案

【问题标题】：jQuery Check if Checkbox is Checked, then Add Value to Input FieldjQuery检查复选框是否被选中，然后将值添加到输入字段
【发布时间】：2012-08-15 20:08:34
【问题描述】：

我有一个购物车结帐页面，我正在尝试添加一个“礼物”选项。需要发生的事情：选中“将订单作为礼物发送”复选框后，需要为隐藏的输入字段分配一个值，以便将信息移动到确认页面和各种收据上。

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>

【问题讨论】：

标签： javascript jquery forms input checkbox

【解决方案1】：

无论何时更改复选框，您都必须更新隐藏字段：

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

【讨论】：

只是上述问题的副本。 $('#gift') 应该这样做。
太棒了！这对我来说非常有效。我改变了一件事（如果您预见到这个问题，请告诉我）：$("#gift-true").val(($(this).is(':checked')) ? "yes" : ""); 我需要“否”为空白，因为如果输入中有任何值，它会移动到收据，我不希望购物者看到“礼物：没有”，因为没有必要。
很好。使用“”而不是“否”应该没有任何问题。

【解决方案2】：

使用jQuery .val() 设置输入元素的值。 jquery .is() 返回一个布尔值，因此您必须检查它是否为 true（使用 if 语句或如下所示的三元运算符），然后有条件地更新该值。另外，你应该更新这个值whenever the box is selected/unselected：

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

另外，如果您的复选框是：

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

适当的 id-selector 是 $('#gift')，而不是 ~~$('#edit-checkbox-id')~~

【讨论】：

【解决方案3】：

$('#edit-checkbox-id').is(':checked') 根据复选框状态返回布尔值 true/false。因此，您应该将其用作条件并决定使用val jQuery 方法设置值。试试这个。

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

【讨论】：

【解决方案4】：

你可以使用 CSS Pseudo-classe 例如：

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

【讨论】：