Jquery如果单选按钮被选中 [英] Jquery If radio button is checked

查看：119
本文介绍了Jquery如果单选按钮被选中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述


可能存在重复：

检查特定单选按钮


我目前有这两个单选按钮，以便用户可以决定是否需要包含在价格中的邮资： 

 < input type =radioid =postageyesname =postagevalue =Yes/>是
< input type =radioid =postagenoname =postagevalue =No/>没有

我需要使用Jquery来检查'yes'单选按钮是否被选中，是，做一个追加函数。有人可以告诉我我该怎么做吗？



感谢您的帮助

编辑：



我已经更新了我的代码，但它不起作用。我做错了什么？

 < script type ='text / javascript'> 
 //<！[CDATA [
 jQuery（document）.ready（function（）{
 
 $（'input：radio [name =postage]'） 。（）（$（this）.val（）=='Yes'）{
 alert（test）; 
} 
}） ; 
 
}）; 
 
 //]]> 
< / script>


解决方案

  $（ （$（this）.is（'：checked'）&& $（this）'input：radio [name =postage]'）。 .val（）=='Yes'）{
 // append goes here 
} 
}）;

或者，再次使用少许 多余的jQuery： 

  $（'input：radio [name =postage]'）。change（
 function（）{ 
 if（this.checked&& this.value =='Yes'）{
 //注意，根据注释，'changed'
 //< input>将会*总是*被检查，因为更改
 //事件仅在检查< input>时触发，而不是
 //在取消检查时触发
 //追加到此处
} 
}）;

修正（改进了一些）jQuery：

  //定义一个div元素，其中包含文字您正在追加！ 
 //将该div赋值给变量'additional'
 var append = $（'< div />').text(\"You're appendin'！）; 
 
 //将附加的id赋予附加元素
 append.id ='附加'; 
 
 // 1.选择'< input type =radio/>'元素，其'name'属性为'postage'
 // 2.分配onChange / onchange事件处理程序
 $（'input：radio [name =postage]'）。change（
 function（）{
 
 //检查单击的单选按钮是其中一个值为'是'
 //元素的值是被检查的元素（如@shef在注释中指出的那样）
 if（$（this）.val（）=='Yes' ）{
 
 //将追加元素附加到'body'标记
 $（附加）.appendTo（'body'）; 
} 
 else {
 
 //如果是'否'按钮，则删除'append'元素
 $（附加）.remove（）; 
} 
}）; 
  

  var append = $（'< div />').text(\"You're appendin'！）; append.id ='append'; $（'input：radio [name =postage ）'）。change（function（）{if（$（this）.val（）=='Yes'）{$（attached）.appendTo（'body'）;} else {$（append）.remove ）;}}）;

< script src = https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js\"></script><input type =radioid =postageyesname =postage value =Yes/>是< input type =radioid =postagenoname =postagevalue =No/> No



JS小提琴演示。

此外，为了将< input /> 元素用<$ c $元素进行包装，我使用了一个温和的更新（因为我正在编辑包括Snippets和JS Fiddle链接） c>< label> s - 允许点击文本来更新相关的< input /> - 并更改创建方式要添加的内容：

var append = $（'< div / >'，{'id'：'added'，'text'：'附加内容'}）; $（'input：radio [name =postage]'）。 this）.val（）=='Yes'）{$（attached）.appendTo（'body'）; } else {$（attached）.remove（）; }}）;

< script src =https： //ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><label> < input type =radioid =postageyesname =postagevalue =Yes/> Yes< / label>< label> < input type =radioid =postagenoname =postagevalue =No/> No< / label>

JS小提琴演示


$ b

//缓存对依赖/条件内容的引用：var conditionalContent = $（'＃conditional'），//缓存对输入组的引用，因为我们使用//相同的组两次：group = $（'input [type = radio] [name = postage]'）; //绑定更改事件处理程序：group.change（function（）{//切换conditionalContent的可见性，//将显示如果评估返回true并隐藏其他情况：conditionalContent.toggle（group.filter（'：checked'）。val（）==='Yes'）; //触发组上的change事件，以适当地显示/隐藏//页面加载/ DOM就绪的conditionalContent：}）。change（）;

< pre class =snippet-code-html lang-html prettyprint-override> < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery .min.js>< /脚本><标签> < input type =radioid =postageyesname =postagevalue =Yes/> Yes< / label>< label> < input type =radioid =postagenoname =postagevalue =No/> No< / label>< div id =conditional> < p>只有当'Yes'收音机& lt;输入& gt; < / div>



最后，只需使用CSS：

/ *设置默认值* /＃conditional {display：none;} / *如果#postageyes元素被选中，那么该元素的常规兄弟，将显示为'conditional'的id：* /＃postageyes： checked〜#conditional {display：block;}

< ！ - 注意< input>元素现在不包裹在< label>元素，以便＃条件元素是无线电<输入>的（后续）兄弟;元素： - >< input type =radioid =postageyesname =postagevalue =Yes/>< label for =postageyes>是< / label>< input =postageno>< label for =postageno> No< / label>< div id =conditional>< type =radioid =postagenoname =postagevalue = < p>只有当'Yes'收音机& lt;输入& gt; < / div>



JS Fiddle演示。



参考文献：


  • CSS：


    Possible Duplicate:
    Check of specific radio button is checked

    I have these 2 radio buttons at the moment so that the user can decide whether they need postage included in the price or not:

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

    I need to use Jquery to check if the 'yes' radio button is checked, and if it is, do an append function. Could someone tell me how I'd do this please?

    Thanks for any help

    edit:

    I've updated my code to this, but it's not working. Am I doing something wrong?

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

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

});

// ]]>
</script>

    解决方案 

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

    Or, the above - again - using a little less superfluous 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
        }
    });

    Revised (improved-some) 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 Fiddle demo.

    And, further, a mild update (since I was editing to include Snippets as well as the JS Fiddle links), in order to wrap the <input /> elements with <label>s - allow for clicking the text to update the relevant <input /> - and changing the means of creating the content to append:

    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 demo.

    Also, if you only need to show content depending on which element is checked by the user, a slight update that will toggle visibility using an explicit show/hide:

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

    And, finally, using just 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 demo.

    References:

    这篇关于Jquery如果单选按钮被选中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆