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

debugcn 发表于 Dev

原子数

我有以下代码。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);

    }
});
});`

大卫说恢复莫妮卡

我建议使用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事件处理程序绑定到的单选按钮。

参考：