`
292292yang
  • 浏览: 15210 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery操作checkbox radio等

 
阅读更多
例:将多个选中的checkbox的值组装成一个字符串

<script type=text/javascript>
function addMem(){
//var followers = document.getElementsByName("followers");
var f_str = '0';
$("input[@name='followers']").each(function(){
   if($(this).attr("checked")==true){
    f_str += ","+$(this).attr("value");
   }
})
alert(f_str);
}
</script>

=====================

例:取选中的radio的值

var gender = $('input[@name=gender][@checked]').val();

=====================

转别人的一些东西:

jquery判断checkbox是否被选中

在html的checkbox里,选中的话会有属性checked="checked"。

如果用一个checkbox被选中,alert这个checkbox的属性"checked"的值alert($"#xxx".attr("checked")),会打印出"true",而不是"checked"!

如果没被选中,打印出的是"undefined"。觉得很奇怪是吗?继续看下去~

不要尝试去做这样的判断:if($"#xxx".attr("checked")=="true")

因为这么做是错的,jQuery的API手册上写,attr(name)的返回值是object。

所以,应该是if($"#xxx".attr("checked")==true)

====================================

jquery全选/取消选择checkbox示例:

<input type="checkbox" name="checkbox_name[]” id=”checkbox_name_1″ />1<br />
<input type=”checkbox” name=”checkbox_name[]” id=”checkbox_name_2″ />2<br />
<input type=”checkbox” name=”checkbox_name[]” id=”checkbox_name_3″ />3<br />
<input type=”checkbox” name=”checkbox_name[]” id=”checkbox_name_4″ />4<br />
<input type=”checkbox” name=”checkedAll” id=”checkedAll”/>全选/取消全选

<script type="text/javascript">
<!--
$(function() {
$("#checkedAll").click(function() {
if ($(this).attr("checked") == true) { // 全选
   $("input[@name='checkbox_name[]']").each(function() {
   $(this).attr("checked", true);
  });
} else { // 取消全选
   $("input[@name='checkbox_name[]']").each(function() {
   $(this).attr("checked", false);
  });
}
});
});
//-->
</script>
=================================================

jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关
获取一组radio被选中项的值
var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;

获取值:

文本框,文本区域:$("#txt").attr("value");
多选框checkbox:$("#checkbox_id").attr("value");
单选组radio:   $("input[@type=radio][@checked]").val();
下拉框select: $('#sel').val();

控制表单元素:
文本框,文本区域:$("#txt").attr("value",'');//清空内容
                 $("#txt").attr("value",'11');//填充内容

多选框checkbox: $("#chk1").attr("checked",'');//不打勾
                 $("#chk2").attr("checked",true);//打勾
                 if($("#chk1").attr('checked')==undefined) //判断是否已经打勾

单选组radio:    $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框select:   $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
                $("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
                $("#sel").empty();//清空下拉框


分享到:
评论

相关推荐

    JQuery操作checkbox、radio等示例

    本篇文章将深入探讨如何使用jQuery来操作checkbox和radio元素,这两种元素在表单提交和用户交互中扮演着重要角色。 首先,让我们了解checkbox和radio的基本概念。Checkbox用于提供多选选项,用户可以勾选多个选项;...

    jquery 设置select checkbox radio只读

    昨天网上找了很多关于设置select checkbox radio只读的,都没办法满足要求,自己写了一个

    jquery radio checkbox 美化

    在网页设计中,jQuery是一种广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本主题聚焦于“jQuery radio checkbox美化”,这涉及到如何使用jQuery和其他前端技术改进默认的HTML复选框...

    jquery操作Radio、Checkbox、Select Demo

    这些是jQuery对Radio、Checkbox和Select基本的操作方式。在实际应用中,你可能还需要结合DOM遍历、事件冒泡等知识,实现更复杂的交互功能。提供的Demo文件应该包含了这些操作的实例代码,通过查看和实践,可以加深...

    JQuery 自定义 radio与checkbox

    jQuery提供了丰富的事件处理函数,如`.click()`, `.change()`, `.focus()`等,可以监听用户对radio和checkbox的操作。例如,当用户点击一个radio按钮时,可以触发一个事件来更新其他同组radio的样式,确保只有一个被...

    jquery美化checkbox,radio

    、根据原有的select 模拟生成新的 select。 2、支持键盘,可通过键盘选择选项。 3、可自定义样式。 4、方便灵活,可选择需要的seletc 进行模拟(非全局模拟) 5、判断用户是否开启脚本支持,若未开启,不进行...

    jQuery美化radio和checkbox

    本文将深入探讨如何使用jQuery来美化radio和checkbox。 首先,理解jQuery的基本概念是必要的。jQuery是一个轻量级、高性能的JavaScript库,它简化了DOM操作、事件处理和动画效果。通过引入jQuery库,开发者可以编写...

    jquery获取各种radio,checkbox,select的值等

    在JavaScript的世界里,jQuery库提供了一种简洁的方式来操作DOM元素,包括处理radio、checkbox和select。这些元素在网页表单中十分常见,用于收集用户输入。以下是对标题和描述中涉及的知识点的详细说明: 1. **...

    select checkbox radio项直接赋值jQuery插件

    jQuery插件只可以用val方法给input标签的text、...而checkbox、radio属性和select标签就无法直接赋值,必须用遍历的方法使对应项选中。 我自己写了一个jQuery的插件,可以直接用setval方法像赋值一样设定选中项。

    jquery.checkbox 单选框多选框美化插件.zip

    在网页开发中,单选框(radio)和多选框(checkbox)是常见的用户交互元素,用于收集用户的选择信息。然而,原生的HTML控件样式往往单调,无法满足现代网页设计的美观需求。jQuery作为一款强大的JavaScript库,提供...

    漂亮的Checkbox Radio漂亮样式

    在网页设计中,Checkbox(复选框)和Radio(单选按钮)是常见的用户界面元素,用于收集用户的选择信息。这些元素的外观和交互性对于提升用户体验至关重要。"漂亮的Checkbox Radio漂亮样式"这个主题,主要关注如何...

    使用JQuery封装的Select&Checkbox&Radio脚本-维豪信息技术有限公司内部

    常见的兼容性问题可能包括事件绑定方式、CSS样式支持和DOM操作等,这些问题在jQuery中都有相应的解决方案。 五、实际应用与优化 在实际项目中,封装这些脚本可以提高代码的可重用性和可维护性。为了优化,可以考虑...

    JQuery触发radio或checkbox的change事件

    在JQuery中,当给radio或checkbox添加一个change事件时,如果它的值发生变化就会触发change事件;本文将详细介绍如何利用JQuery触发Checkbox的change事件需要了解的朋友可以参考下

    HTML5 CheckBox Radio按钮美化特效.rar

    基于jquery HTML5 CheckBox Radio按钮美化特效,演示了不一样的checkbox和Radiobox,加入了点击动画效果,鼠标点击后选中状态也是与默认的风格不一样,如截图所示的为本款效果,更多详情细节请下载本示例自己测试...

    jQuery实现自定义checkbox和radio样式

    jQuery 实现自定义 checkbox 和 radio 样式是一种常见的前端美化技术,它可以帮助开发者摆脱浏览器默认样式,创造出符合网站设计风格的交互元素。本篇将详细解释如何使用 jQuery 实现这一功能。 首先,我们要理解...

    Jquery操作radio,checkbox,select表单操作实现代码

    在网页开发中,jQuery库为...通过以上代码,我们可以轻松地完成对radio、checkbox和select表单元素的增删改查等操作,大大提高了开发效率。在实际项目中,可以根据具体需求进行组合和扩展,实现更复杂的交互逻辑。

    jquery的checkbox,radio,select等方法小结

    在jQuery中,对HTML元素的操纵是前端开发中不可或缺的一部分,尤其对于`checkbox`、`radio`和`select`这些常见的表单控件,熟练掌握它们的jQuery操作至关重要。这里我们将详细探讨这些方法,帮助你更好地理解和应用...

    jquery 获得select、radio、checkbox选择的text和value值

    ### jQuery 获取 Select、Radio、Checkbox 的 Text 和 Value 值详解 #### 一、Select 下拉框的操作 在网页开发中,`&lt;select&gt;` 标签用于创建下拉列表,通常用于用户输入时的选择操作。jQuery 提供了简单且强大的...

    jquery checkbox,radio是否选中的判断代码

    在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理以及Ajax交互等任务。在HTML表单中,`checkbox` 和 `radio` 是常见的交互元素,它们通常用于用户的选择输入。本文将详细介绍如何...

Global site tag (gtag.js) - Google Analytics