`
mike.gao
  • 浏览: 48457 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

(转)JQuery操作checkbox、radio等示例

阅读更多
在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”/>全选/取消全选

   1. <script type="text/javascript">
   2. <!--
   3. $(function() {
   4. $("#checkedAll").click(function() {
   5. if ($(this).attr("checked") == true) { // 全选
   6.    $("input[@name='checkbox_name[]']").each(function() {
   7.    $(this).attr("checked", true);
   8.   });
   9. } else { // 取消全选
  10.    $("input[@name='checkbox_name[]']").each(function() {
  11.    $(this).attr("checked", false);
  12.   });
  13. }
  14. });
  15. });
  16. //-->
  17. </script>
      ------------------------------------------------------------

$("#checkedAll").click(function() {
#    $("input[@name='checkbox_name[]']").each(function() {
#        var ckif = $("#checkedAll").get(0).checked;
#       $(this).attr("checked", ckif);
#   });

}

}

}

这样写估计好点

=================================================
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 自定义 radio与checkbox

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

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

    1. **index.html**:这是示例页面,包含了使用jQuery.checkbox插件的HTML结构和JavaScript代码。通过查看这个文件,我们可以学习如何在实际项目中引入和应用插件,同时了解其基本配置和使用方法。 2. **...

    HTML5 CheckBox Radio按钮美化特效.rar

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

    jQuery获取Radio,CheckBox选择的Value值(示例代码)

    ### 知识点详解 ...以上内容总结了通过jQuery获取和操作Radio、CheckBox以及文本框Value值的基本方法。这些操作对于处理表单数据和用户交互非常有用,而且示例代码也方便读者理解和实际应用这些知识点。

    jQuery实现自定义checkbox和radio样式

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

    jQuery根据ID获取input、checkbox、radio、select的示例

    标题和描述中提到的知识点主要涉及使用jQuery根据ID获取不同类型的HTML表单元素,包括input、checkbox、radio和select。这些表单元素是Web页面中常见的用于用户交互的元素,它们可以用来收集用户的数据。获取这些...

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

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

    Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)

    在网页开发中,jQuery 是一个非常流行的 JavaScript 库,它提供了简洁、强大的API来操作DOM元素,包括处理各种表单元素如radio和checkbox。本文将详细介绍如何使用jQuery改变radio和checkbox的选中状态以及如何获取...

    jQuery-Easyui完整示例demo

    4. 表单(form):jQuery EasyUI 提供了各种表单元素,如输入框(input)、复选框(checkbox)、单选按钮(radio)等,可以方便地与后台进行数据交互,实现表单验证和提交。 5. 树形结构(tree):tree 组件用于...

    zTree 3.5 radio/checkbox自定义树形

    页面中,我们可以看到 Radio 和 Checkbox 功能的共存示例。这种组合模式可以满足更复杂的交互需求,例如在同一个树形结构中,部分节点需要单选,部分节点需要多选。 **四、配置与使用** 要启用 Radio 或 Checkbox ...

    使用jquery与图片美化checkbox和radio控件的代码(打包下载)

    总结以上内容,这篇文档详细介绍了如何使用jQuery以及相关插件来美化HTML的checkbox和radio控件,通过示例代码展示了具体的操作方法,并强调了插件的可定制性,鼓励开发者在原有基础上进一步美化界面。同时,文档还...

    jQuery formValidator表单验证插件示例源码

    jQuery formValidator表单验证插件示例源码 jQuery formValidator表单验证插件是什么? jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的...

    使用jQuery获取radio/checkbox组的值的代码收集

    综上所述,使用jQuery操作radio和checkbox时,需要熟练运用选择器和jQuery提供的各种方法,例如attr(), removeAttr(), each(), val()等。这些方法的组合使用使得我们可以轻松地实现全选、取消全选、反选、获取选中值...

    jQuery常见的表单操作

    以下是一些常见的jQuery表单操作,包括处理复选框(Checkbox)、文本输入(Text)、单选按钮(Radio)以及下拉列表(Select): 1. **复选框(Checkbox)**: - `$("input[name='checkbox_name'][checked]")` 用于...

    jquery 单选按钮点击切换

    在网页开发中,jQuery 是一个广泛...实际应用中,你还可以根据需求添加更多的功能,如验证用户是否已选择、在点击后触发其他操作等。总的来说,jQuery 提供了一个简洁的 API,使得处理这些常见的交互任务变得轻松易行。

Global site tag (gtag.js) - Google Analytics