Jquery操作radio的简单实例

前端技术 2023/09/01 JavaScript

<input name=\"study\" type=\"radio\" value=\"Jquery插件教程\">Jquery插件教程
<input name=\"study\" type=\"radio\" value=\"Jquery学习\">Jquery学习
<input name=\"study\" type=\"radio\" value=\"PHP学习\">PHP学习
<input id=\"tijiao\" type=\"button\" value=\"确定\">
<input id=\"set_jqeury_study\" title=\"Jquery学习\" type=\"button\" value=\"将radio设定为Jquery学习\">
<input name=\"study\" type=\"text\" value=\"请输入您想学到的知识\">
<input id=\"view_input_text\" type=\"button\" value=\"点击我，查看到的是同样名为‘study\'，但是类型是TEXT的输入框里面的值\">

在上面的html代码中，细心的您应该可以发现3个radio的name属性和一个text的name属性都是“study”

复制代码 代码如下:

$(function(){
$(\'#tijiao\').click(function(){
if ($(\"input:[name=study]:radio:checked\").length == 0){
alert(\"请选择您想学习的知识\");
return false;
}
var study = $(\"input:[name=study]:radio:checked\").val();
alert(\"谢谢！您选择的是\" + study);
})
$(\"#set_jqeury_study\").click(function(){
var $button = $(this);
$(\"input:[name=study]:radio\").each(function(){
if (this.value == $button.attr(\'title\')){
this.checked=true;
}
})
})
$(\"#view_input_text\").click(function(){
alert($(\"input[name=study]:text\").val());
})
})

$(“input:[name=study]:radio:checked”)这段代码取得的是所有name属性为“study”而且已经被选中的radio的jquery对象，通过判断他的length 是否等于0，就可以知道这个radio选项是否有一个被选中了。$(“input[name=study]:text”)这段代码取得的是name属性为“study”的text输入框的jquery对象。

本文地址：https://www.stayed.cn/item/1907

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案