jQuery如果单选按钮被选中


149

可能重复:
检查特定单选按钮的检查

我现在有两个单选按钮,以便用户可以决定是否需要价格中包含的邮​​资:

<input type="radio" id="postageyes" name="postage" value="Yes" /> Yes
<input type="radio" id="postageno" name="postage" value="No" /> No

我需要使用Jquery来检查是否选中了“是”单选按钮,如果是,则执行追加功能。有人可以告诉我我该怎么做吗?

谢谢你的帮助

编辑:

我已经将代码更新为此,但无法正常工作。难道我做错了什么?

<script type='text/javascript'>
// <![CDATA[
jQuery(document).ready(function(){

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

});

// ]]>
</script>

1
@Daniel H:在您进行更新时:一切正常
Shef,2011年

奇怪,它只是在我的网站上不起作用。至少我知道代码是正确的,我将尽力找出问题所在,感谢所有答案!
Daniel H

Answers:


283
$('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();
        }
    });

JS Fiddle演示

并且,进一步进行了温和的更新(因为我正在编辑以包含片段以及JS Fiddle链接),以便<input />使用<label>s 包裹元素-允许单击文本以更新相关内容<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>

JS Fiddle演示

另外,如果您只需要根据用户检查的元素来显示内容,则可以进行轻微的更新,以使用显式的显示/隐藏来切换可见性:

// 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>

最后,仅使用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 &lt;input&gt; element is checked.</p>
</div>

JS Fiddle演示

参考文献:


3
无需查看是否已检查。否则它将永远没有价值。浪费资源!
Shef,2011年

22

试试这个

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

12

像这样:

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

3
jQuery对象始终是真实的。您可能要$(...).length改用。
pimvdb

你是说#postageyes:checked还是$('#postageyes').is(':checked')
Shef,2011年

@pimvdb根据jQuery文档,is()返回一个布尔值。因此通话.length()中断。从文档中:“与其他过滤方法不同,.is()不会创建新的jQuery对象。相反,它允许您未经修改就测试jQuery对象的内容。” - api.jquery.com/is
亚萨

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

这将侦听单选按钮上的更改事件。用户单击时Yes,事件将触发,您将可以将所需的任何内容附加到DOM。


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

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

对此不太确定,但是,是否$("#postageyes:checked"总是会返回true?您是否需要使用.length才能正常工作?
菲尔(Phil)

删除了“或”以及其后的所有内容
起源


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

尽管此代码段可以解决问题,但提供说明确实有助于提高您的帖子质量。请记住,您将来会为读者回答这个问题,而这些人可能不知道您提出代码建议的原因。
帕特里克·洪德

得到它了。下一个答案将是一个。
本杰明

0

这将监听更改的事件。我尝试了其他人的答案,但是这些答案对我不起作用,最后,这个答案奏效了。

$('input:radio[name="postage"]').change(function(){
    if($(this).is(":checked")){
        alert("lksdahflk");
    }
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.