CheckBox将所有已完成的输入字段复制到下面的字段

Question

我有以下代码。 OnClick复选框，我想将每个完整的input复制到下面的那些。

我可以使用长Jquery脚本执行此操作。但必须有一种方法可以用几行来做到这一点？有人请介意解释这个概念吗？

以下是 Fiddle ：

我的代码：

<form action="?action=processOrder" method="post" id="hidden">
    <label>
        <input type="radio" name="paymentMethod" value="Cash on Delivery" checked>
        <p style="float: left;margin: -2px 0 0 9px;">Cash on Delivery</p>
    </label>
    <br>
    <label>
        <input type="radio" name="paymentMethod" value="Pay Online" id="payOnline">
        <p style="float: left;margin: -2px 0 0 9px;">Pay Online</p>
    </label>
    <fieldset id="contact-inputs">
        <input id="deliveryAddressLineOne" type="text" name="deliveryAddressLineOne" placeholder="Address line one" required>
    </fieldset>
    <fieldset id="contact-inputs">
        <input id="deliveryAddressLineTwo" type="text" name="deliveryAddressLineTwo" placeholder="Address line two" required>
    </fieldset>
    <fieldset id="contact-inputs">
        <input id="deliveryAddressTown" type="text" name="deliveryAddressTown" placeholder="Town" required>
    </fieldset>
    <fieldset id="contact-inputs">
        <input id="deliveryAddressCounty" type="text" name="deliveryAddressCounty" placeholder="County" required>
    </fieldset>
    <fieldset id="contact-inputs">
        <input id="deliveryAddressPostCode" type="text" name="deliveryAddressPostCode" placeholder="Post Code" required>
    </fieldset>
    <!-- if pay online checked, show the other fields -->
    <label class="billingAddress" style="display:none;">My billing address is the same as delivery.
        <input type="checkBox" placeholder="Same as Delivery" id="duplicateDelivery">
    </label>
    <fieldset id="contact-inputs">
        <input class="billingAddress" type="text" name="billingAddressLineOne" placeholder="Address line one" required>
    </fieldset>
    <fieldset id="contact-inputs">
        <input class="billingAddress" type="text" name="billingAddressLineTwo" placeholder="Address line two" required>
    </fieldset>
    <fieldset id="contact-inputs">
        <input class="billingAddress" type="text" name="billingAddressTown" placeholder="Town" required>
    </fieldset>
    <fieldset id="contact-inputs">
        <input class="billingAddress" type="text" name="billingAddressCounty" placeholder="County" required>
    </fieldset>
    <fieldset id="contact-inputs">
        <input class="billingAddress" type="text" name="billingAddressPostCode" placeholder="Post Code" required>
    </fieldset>
    <fieldset>
        <input id="processOrder" class="green-button" type="submit" name="saveChanges" value="Process Order" />
    </fieldset>
</form>

jQuery，

$(document).ready(function () {
    $('input[type="radio"]').click(function () {
        if ($(this).attr('id') == 'payOnline') {
            $('.billingAddress').show();
            $('#County').show();
            $('#postCode').show();
            $("input").prop('required', 'true');

    } else {

        $('#processOrder').show();
        $('.billingAddress').hide();
        $('#County').hide();
        $('#postCode').hide();
        $("input").prop('required', false);

    }
});
});`

Answer 1

我建议使用toggle()方法，使用布尔值开关：

$('input[type="radio"]').click(function () {
    var check = this.id === 'payOnline';
    // select all the elements you want to show/hide:
    $('.billingAddress, #County, #postCode')
        // using a Boolean switch will show the collection
        // if it is, or evaluates to, true (or truthy) and
        // hide them if it is, or evaluates to, false (or falsey):
        .toggle(check);
    if (!check) {
        // this is in an 'if' because you've only shown one state,
        // though I suspect that's an error by omission, and
        // toggle(!check) is more likely what you want:
        $('#processOrder').show();
    }
    $('input').prop('required', check);
});

虽然值得注意的是，您的最终选择器会禁用所有 <input>元素，包括您正在绑定click事件的单选按钮-handler to。

参考文献：

• toggle()。
• prop()。