$('input:radio[name="postage"]').change(
function(){
if ($(this).is(':checked') && $(this).val() == 'Yes') {
// append goes here
}
});
Hoặc, ở trên - một lần nữa - sử dụng một ít jQuery không cần thiết:
$('input:radio[name="postage"]').change(
function(){
if (this.checked && this.value == 'Yes') {
// note that, as per comments, the 'changed'
// <input> will *always* be checked, as the change
// event only fires on checking an <input>, not
// on un-checking it.
// append goes here
}
});
Đã sửa đổi (cải thiện một số) jQuery:
// defines a div element with the text "You're appendin'!"
// assigns that div to the variable 'appended'
var appended = $('<div />').text("You're appendin'!");
// assigns the 'id' of "appended" to the 'appended' element
appended.id = 'appended';
// 1. selects '<input type="radio" />' elements with the 'name' attribute of 'postage'
// 2. assigns the onChange/onchange event handler
$('input:radio[name="postage"]').change(
function(){
// checks that the clicked radio button is the one of value 'Yes'
// the value of the element is the one that's checked (as noted by @shef in comments)
if ($(this).val() == 'Yes') {
// appends the 'appended' element to the 'body' tag
$(appended).appendTo('body');
}
else {
// if it's the 'No' button removes the 'appended' element.
$(appended).remove();
}
});
var appended = $('<div />').text("You're appendin'!");
appended.id = 'appended';
$('input:radio[name="postage"]').change(function() {
if ($(this).val() == 'Yes') {
$(appended).appendTo('body');
} else {
$(appended).remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<input type="radio" id="postageyes" name="postage" value="Yes" />Yes
<input type="radio" id="postageno" name="postage" value="No" />No
Bản demo của Fiddle .
Và hơn nữa, một bản cập nhật nhẹ (vì tôi đã chỉnh sửa để bao gồm Snippets cũng như các liên kết JS Fiddle), để bọc các <input />phần tử bằng <label>s - cho phép nhấp vào văn bản để cập nhật liên quan <input />- và thay đổi phương tiện tạo nội dung để nối thêm:
var appended = $('<div />', {
'id': 'appended',
'text': 'Appended content'
});
$('input:radio[name="postage"]').change(function() {
if ($(this).val() == 'Yes') {
$(appended).appendTo('body');
} else {
$(appended).remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="radio" id="postageyes" name="postage" value="Yes" />Yes</label>
<label>
<input type="radio" id="postageno" name="postage" value="No" />No</label>
Bản demo của Fiddle .
Ngoài ra, nếu bạn chỉ cần hiển thị nội dung tùy thuộc vào yếu tố nào được người dùng kiểm tra, một bản cập nhật nhỏ sẽ chuyển đổi khả năng hiển thị bằng cách sử dụng hiển thị / ẩn rõ ràng:
// caching a reference to the dependant/conditional content:
var conditionalContent = $('#conditional'),
// caching a reference to the group of inputs, since we're using that
// same group twice:
group = $('input[type=radio][name=postage]');
// binding the change event-handler:
group.change(function() {
// toggling the visibility of the conditionalContent, which will
// be shown if the assessment returns true and hidden otherwise:
conditionalContent.toggle(group.filter(':checked').val() === 'Yes');
// triggering the change event on the group, to appropriately show/hide
// the conditionalContent on page-load/DOM-ready:
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="radio" id="postageyes" name="postage" value="Yes" />Yes</label>
<label>
<input type="radio" id="postageno" name="postage" value="No" />No</label>
<div id="conditional">
<p>This should only show when the 'Yes' radio <input> element is checked.</p>
</div>
Và cuối cùng, chỉ sử dụng CSS:
/* setting the default of the conditionally-displayed content
to hidden: */
#conditional {
display: none;
}
/* if the #postageyes element is checked then the general sibling of
that element, with the id of 'conditional', will be shown: */
#postageyes:checked ~ #conditional {
display: block;
}
<!-- note that the <input> elements are now not wrapped in the <label> elements,
in order that the #conditional element is a (subsequent) sibling of the radio
<input> elements: -->
<input type="radio" id="postageyes" name="postage" value="Yes" />
<label for="postageyes">Yes</label>
<input type="radio" id="postageno" name="postage" value="No" />
<label for="postageno">No</label>
<div id="conditional">
<p>This should only show when the 'Yes' radio <input> element is checked.</p>
</div>
Bản demo của Fiddle .
Người giới thiệu: