就像这样:

if($('#postageyes').is(':checked')) {
// do stuff
}

$("input").bind('click', function(e){
if ($(this).val() == 'Yes') {
$("body").append('whatever');
}
});

试试这个

if($("input:radio[name=postage]").is(":checked")){
//Code to append goes here
}

$('input:radio[name="postage"]').change(
function(){
if ($(this).is(':checked') && $(this).val() == 'Yes') {
// append goes here
}
});

或者，使用一个小小的 更少多余的 jQuery:

$('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

JS 小提琴演示。

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>

JS 小提琴演示。

// 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 &lt;input&gt; 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 &lt;input&gt; element is checked.</p>
</div>

JS 小提琴演示。

• • :checked选择器 。
  • 属性选择器。
  • 一般同胞(~)组合子 。
• JQuery:
  • appendTo() .
  • 属性等于选择器 。
  • change() .
  • :checked选择器 。
  • filter() .
  • is() .
  • :radio选择器 。
  • remove() .
  • text() .
  • toggle() .
  • val() .

$('input:radio[name="postage"]').change(function(){
if($(this).val() === 'Yes'){
// append stuff
}
});

这将侦听单选按钮上的更改事件。当用户单击 Yes时，事件将触发，您将能够向 DOM 追加任何您喜欢的内容。

试试这个:

if ( jQuery('#postageyes').is(':checked') ){ ... }

if($('#test2').is(':checked')) {
$(this).append('stuff');
}

jQuery('input[name="inputName"]:checked').val()

这将监听更改后的事件。我已经尝试了其他人的答案，但这些都不适合我，最后，这一个工作。

$('input:radio[name="postage"]').change(function(){
if($(this).is(":checked")){
alert("lksdahflk");
}
});

另一个实施方案可能是:

超文本标示语言

<h1>Display Radio Buttons</h1>
<form action="/action_page.php">
<p>Please select your favorite Web language:</p>
<!-- 1 -->
<input type="radio" id="html" name="fav_language" value="HTML" checked>
<label for="html">HTML</label><br>


<!-- 2 -->
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>


<!-- 3 -->
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>


<br>
<input type="submit" value="Submit">
</form>

记住:

• 将单选按钮分组。
• 告诉每个单选按钮的状态。
• value: 这是你提交后要发布的内容。
• for: 允许您将给定的标签关联到名为 input 字段的 id。
• 提交按钮: 将选定的单选按钮值发布到 Web 服务器(后端)。

JQuery

记住这是代码前端。

在这里，您将选择所有按钮的 type，并做任何您想与您的选择。在本例中，我们将使用 HTML 元素的 value部分:

$("[type='radio']").on('change', function (e) {
var selectedValue = $(this).val();
console.log(selectedValue); // So you can see it in the console.
if (selectedValue == 'HTML') {
// Do something.
}
else {
// Or do something else.
// Example:
// someOtherSelectedElement.prop("disabled", false);
}
});

根据需要向单选按钮添加尽可能多的 if语句。

请记住，由于使用了 value字段，您可以设置任意多的选项。

结果

实时代码

参考文献

• W3学校的 HTML