$('input:radio[name="postage"]').change(
function(){
if ($(this).is(':checked') && $(this).val() == 'Yes') {
// append goes here
}
});
বা, উপরের - আবার - কিছুটা কম অতিরিক্ত অতিরিক্ত জিকুয়ুরি ব্যবহার করে :
$('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
}
});
সংশোধিত (কিছু উন্নত) 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
জেএস ফিডল ডেমো ।
এবং আরও, একটি হালকা আপডেট (যেহেতু আমি স্নিপেটস পাশাপাশি জেএস ফিডাল লিঙ্কগুলি অন্তর্ভুক্ত করার জন্য সম্পাদনা করছিলাম), যাতে <input />উপাদানগুলি <label>এস এর সাথে মোড়ানোর জন্য <input />- প্রাসঙ্গিক আপডেট করার জন্য পাঠ্যে ক্লিক করার অনুমতি দিন - এবং তৈরির উপায়গুলি পরিবর্তন করে সংযোজন সামগ্রী:
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>
জেএস ফিডল ডেমো ।
এছাড়াও, যদি আপনাকে কেবল ব্যবহারকারী দ্বারা কোন উপাদানটি পরীক্ষা করা হয় তার উপর নির্ভর করে বিষয়বস্তু প্রদর্শন করতে হবে, একটি সামান্য আপডেট যা একটি স্পষ্ট শো / লুকান ব্যবহার করে দৃশ্যমানতা টগল করবে:
// 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>
এবং, অবশেষে, কেবল সিএসএস ব্যবহার করে:
/* 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>
জেএস ফিডল ডেমো ।
তথ্যসূত্র: