用复选框填写表格

Question

我想要一组表单，用户将在其中输入帐单地址，并通过选中复选框，用户将能够填写下一部分。

我想用 jQuery 来做。如果可能的话，我该怎么做。

或者，如果 jQuery 无法实现。那么，我该怎么做呢？

<form role="form" class="form-horizontal">
<div class="form-group">
<h2>Billing Address</h2>
<p><span>Address 1</span><input type="text" placeholder="Name" id="billing_addres_1"></p>
<p><span>Address 2</span><input type="text" placeholder="Name" id="billing_addres_2"></p>
<p><span>City</span><input type="text" placeholder="Name" id="billing_city"></p>
<p><span>Country/Region</span><input type="text" placeholder="Name" id="billing_country"></p>
</div>
<div class="form-group">
<div class="checkbox">
<p><input type="checkbox">Check if billing address are same</p>
</div>
</div>
<div class="form-group">
<h2>Billing Address</h2>
<p><span>Address 1</span><input type="text" placeholder="Name" id="permanent_addres_1"></p>
<p><span>Address 2</span><input type="text" placeholder="Name" id="permanent_addres_2"></p>
<p><span>City</span><input type="text" placeholder="Name" id="permanent_city"></p>
<p><span>Country/Region</span><input type="text" placeholder="Name" id="permanent_country"></p>
</div>
<button class="btn" type="submit">Sign in</button>
</form>

Answer 1

JQuery

首先，您需要在您的checkbox 和您的群组div 上设置一些ID，如下所示：

<input id="matchedbilling" type="checkbox">

和

<div id="billinggroup" class="form-group">

这将允许您使用JQuery ID selector 轻松引用它们，例如$("#myId")。

在您的脚本部分，您需要为您的复选框注册一个change 事件处理程序，在此您需要根据复选框状态设置计费组的可见性：

$("#matchedbilling").change(function(){
    //check if this checkbox is checked
    if($(this).is(":checked"))
        $("#billinggroup").hide();//if selected, hide the billing group
    else
        $("#billinggroup").show();//not selected, so show the billing group
});
$("#matchedbilling").change();//this will call the change event on page load so that the billing group starts of hidden

Here is a working example

---

仅限 JavaScript

这是唯一的 javascript 方法，概念是相同的，但我们必须手动缓存元素的先前显示状态，以便我们可以确保它在显示时正确恢复。这是一些 JQuery 自动使用它的数据缓存所做的。

document.getElementById("matchedbilling").onchange = checkChanged;
var lastDisplayState = "block";
function checkChanged() {
    //check if this checkbox is checked
    var group = document.getElementById("billinggroup");//get the billing group element
    if (this.checked) {
        lastDisplayState = group.style.display;//store the current display state
        group.style.display = "none"; //if selected, hide the billing group
    } else {
        group.style.display = lastDisplayState; //not selected, so show the billing group
    }
}
checkChanged(); //this will call the change event on page load so that the billing group starts of hidden

Here is a working example

---

旁注

重申一下您在 cmets 中被告知的内容...id 属性对于整个文档应该是唯一的。重复可能看起来无害，但是当您选择它们​​时将使用 javascript/JQuery，您将不会得到一致的结果。如果您需要多个元素的通用标识符，请考虑使用class 而不是JQuery class selector，例如$(".myClassName")

Answer 2

这很简单。您的标记不是那么好，但您需要为每个输入元素分配一个特定的 ID。然后用 jQuery 填充。这是jsfiddle：http://jsfiddle.net/Pvu8r/

<form role="form" class="form-horizontal">
<div class="form-group">
<h2>Billing Address</h2>
<p><span>Address 1</span><input type="text" placeholder="Name" id="Address1"></p>
<p><span>Address 2</span><input type="text" placeholder="Name" id="Address2"></p>
<p><span>City</span><input type="text" placeholder="Name" id="City"></p>
<p><span>Country/Region</span><input type="text" placeholder="Name" id="Country"></p>
</div>
<div class="form-group">
<div class="checkbox">
<p><input type="checkbox" id="checkit">Check if billing address are same</p>
</div>
</div>
<div class="form-group">
<h2>Billing Address</h2>
<p><span>Address 1</span><input type="text" placeholder="Name" id="Address1b"></p>
<p><span>Address 2</span><input type="text" placeholder="Name" id="Address2b"></p>
<p><span>City</span><input type="text" placeholder="Name" id="Cityb"></p>
<p><span>Country/Region</span><input type="text" placeholder="Name" id="Countryb"></p>
</div>
<button class="btn btn-default" type="submit">Sign in</button>
</form>

JQUERY（这应该在您标记之前包含在标记中：

$(document).ready(function(){
    $("#checkit").click(function(){
        if($(this).is(':checked')){
        var address = $("#Address1").val();
        var address2 = $("#Address2").val();
        var city = $("#City").val();
        var country = $("#Country").val();
        //set the variable in lower form with vars set above
        $("#Address1b").val(address);
        $("#Address2b").val(address2); 
        $("#Cityb").val(city);
        $("#Countryb").val(country);
        }else{
//uncheck - clear input
        $("#Address1b").val("");
        $("#Address2b").val(""); 
        $("#Cityb").val("");
        $("#Countryb").val("");
        }
    });
});

确保添加 jquery 文件，否则这将不起作用。希望这会有所帮助！