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

SIDE NOTE

重申你在评论中告诉你的内容...... 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文件，否则这将无效。希望这有帮助！

表格填写复选框

2 个答案: