체크 박스로 채우기 양식

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

매우 간단합니다. 마크 업은 그다지 좋지 않지만 각 입력 요소에 특정 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와 파일을 추가해야합니다 희망이 도움이!

Answer 2

JQuery와 당신이 당신의 checkbox 일부 ID 년대를 설정해야합니다 모든

먼저하고 그룹 div,이 같은 :

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

및

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

그 너를 쉽게 심판 할 수있게 해줄거야. 예를 들어 $("#myId")과 같이 JQuery ID selector으로 표시합니다.

$("#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

---

: 스크립트 섹션에서

당신이 내 당신이 체크 박스의 상태에 따라 과금 그룹의 가시성을 설정해야합니다, 당신의 체크 박스에 대한 change 이벤트 핸들러를 등록해야

자바 스크립트 만

이것은 javascri입니다 pt 만 접근하는 경우 개념은 동일하지만 요소의 이전 표시 상태를 수동으로 캐시해야 표시 될 때 올바르게 복원되도록 할 수 있습니다. 이것은 JQuery가 데이터 캐시와 함께 자동으로 수행하는 일부 작업입니다.

Here is a working example

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 

는

---

그냥 당신이 의견 들었다 것을 반복하는 SIDE 참고 ... id 속성은 전체 문서에 고유해야합니다. 중복이 무해한 것처럼 보일 수도 있지만, 자바 스크립트/JQuery를 선택하면 일관된 결과를 얻을 수 없습니다. 여러 요소에 대한 공통 식별자가 필요한 경우 JQuery class selector 대신 class을 사용하는 것이 좋습니다. 예를 들어 $(".myClassName")