라디오 버튼을 선택한 후 라디오 버튼 텍스트를 변경하고 싶습니다. 첫 번째 라디오 버튼이 선택되면 텍스트가에서 Checkout as a guest로 변경되어야 합니다 Checkout as a guest --> Please Press continue.
두 번째 라디오 버튼을 선택하면 텍스트가에서 Register an account로 변경되어야 합니다.Register an account --> Please Press Continue
<div class="PL40" style="line-height: 2;">
<dl>
<dd>
<label>
<div class="radio" id="uniform-checkout_type_guest">
<span class="">
<input name="checkout_type" id="checkout_type_guest" value="guest" type="radio" onclick="$('#BillingDetailsLabel').html('Billing Details');">
</span>
</div>
Checkout as a guest
</label>
</dd>
<dd>
<label>
<div class="radio" id="uniform-checkout_type_register">
<span class="checked">
<input name="checkout_type" id="checkout_type_register" value="register" checked="checked" type="radio" onclick="$('#BillingDetailsLabel').html('Billing & Account Details');">
</span>
</div>
Register an account
</label>
</dd>
<dd class="Submit mt10 mb10">
<input type="submit" id="CreateAccountButton" value="Continue" class="btn">
<span class="LoadingIndicator" style="display: none">
<img src="https://cdn6.bigcommerce.com/r-b99d97b0aae9cde0306565d8de6f047a25afdd8a/themes/Artify/images/Loading.gif" alt="">
</span>
</dd>
</dl>
</div>
자바 스크립트
$("input[name='checkout_type']").click(function() {
$('#uniform-checkout_type_guest').text('Checkout as Guest');
$( "#uniform-checkout_type_guest" ).append( "<strong>---Hello</strong>" )
});
다음은 jQuery를 더 간결하게 만들 수있는 세 가지 변경 사항입니다.
span요소에 레이블 텍스트 넣기span요소를 공통 클래스 -radio-labeldata라디오 버튼에 속성 추가 -data-default-text//wait for DOM ready event
$(function() {
//attach a change event listener to the radio buttons -- could give them a common class
$(':radio[name=checkout_type]').on('change', function() {
//reset labels
$('.radio-label').text( function() {
return $(this).closest('label').find(':radio').data('default-text');
});
//set new label per checked radio
$(this).closest('label').children('.radio-label')
.text( $(this).data('default-text') + ' --> Please Press Continue' );
})
//trigger change in case a radio is selected when page loads
.change();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="PL40" style="line-height: 2;">
<dl>
<dd>
<label>
<div class="radio" id="uniform-checkout_type_guest">
<span class="">
<input name="checkout_type" id="checkout_type_guest" value="guest" type="radio" onclick="$('#BillingDetailsLabel').html('Billing Details');" data-default-text="Checkout as a guest">
</span>
</div>
<span class="radio-label">Checkout as a guest</span>
</label>
</dd>
<dd>
<label>
<div class="radio" id="uniform-checkout_type_register">
<span class="checked">
<input name="checkout_type" id="checkout_type_register" value="register" checked="checked" type="radio" onclick="$('#BillingDetailsLabel').html('Billing & Account Details');" data-default-text="Register an account">
</span>
</div>
<span class="radio-label">Register an account</span>
</label>
</dd>
<dd class="Submit mt10 mb10">
<input type="submit" id="CreateAccountButton" value="Continue" class="btn">
<span class="LoadingIndicator" style="display: none">
<img src="https://cdn6.bigcommerce.com/r-b99d97b0aae9cde0306565d8de6f047a25afdd8a/themes/Artify/images/Loading.gif" alt="">
</span>
</dd>
</dl>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다