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

jqeury checkedbox 总结

 
阅读更多
//判断一个复选框被选中
if($("#id").attr("checked")==true)

// js 例子

<script type="text/javascript">
jQuery(function($){
//全选
$("#btn1").click(function(){
$("input[name='checkbox']").attr("checked","true");
})
//取消全选
$("#btn2").click(function(){
$("input[name='checkbox']").removeAttr("checked");
})
//选中所有基数
$("#btn3").click(function(){
$("input[name='checkbox']:even").attr("checked","true");
})
//选中所有偶数
$("#btn6").click(function(){
$("input[name='checkbox']:odd").attr("checked","true");
})
//反选
$("#btn4").click(function(){
$("input[name='checkbox']").each(function(){
if($(this).attr("checked"))
{
$(this).removeAttr("checked");
}
else
{
$(this).attr("checked","true");
}
})
})
//或许选择项的值
var aa="";
$("#btn5").click(function(){
$("input[name='checkbox']:checkbox:checked").each(function(){
aa+=$(this).val()
})
document.write(aa);
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="btn1" value="全选">
<input type="button" id="btn2" value="取消全选">
<input type="button" id="btn3" value="选中所有奇数">
<input type="button" id="btn6" value="选中所有偶数">
<input type="button" id="btn4" value="反选">
<input type="button" id="btn5" value="获得选中的所有值">
<br>
<input type="checkbox" name="checkbox" value="checkbox1"> checkbox1
<input type="checkbox" name="checkbox" value="checkbox2"> checkbox2
<input type="checkbox" name="checkbox" value="checkbox3"> checkbox3
<input type="checkbox" name="checkbox" value="checkbox4"> checkbox4
<input type="checkbox" name="checkbox" value="checkbox5"> checkbox5
<input type="checkbox" name="checkbox" value="checkbox6"> checkbox6
<input type="checkbox" name="checkbox" value="checkbox7"> checkbox7
<input type="checkbox" name="checkbox" value="checkbox8"> checkbox8
</div>
</form>

// 尽量使用  根据input name 获取checkbox 的状态
$("input[name='checkbox']:checkbox:checked") 

//
•对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
•对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。
分享到:
评论

相关推荐

    Draw2D 模拟SWT控件之RadioButton、CheckedBox

    总结来说,Draw2D模拟SWT的RadioButton和CheckedBox控件是通过自定义图形对象和事件处理来实现的,这在一些需要高度定制界面或者跨平台应用的场景下非常有用。通过结合源码和工具,我们可以创造出更符合用户需求的...

    checkedbox全选 js文件

    HTML checkbox js全选 相信可以对您有用,js全选

    checkedbox 选中效果 选中子,主自动选中,选中主 子全部选中

    根据提供的文件信息,我们可以总结出以下相关知识点: ### 1. Checkbox 选中效果实现原理 在本案例中,主要涉及到了如何通过 JavaScript 和 JSP 实现 checkbox 的选中效果,具体包括“选中子项时,父项自动被选中...

    设置checkbox为只读(readOnly)的两种方式

    在网页表单设计中,有时候我们希望用户能够看到checkbox(复选框)的状态,...综上所述,通过JavaScript或jQuery可以有效地使checkbox呈现只读状态,但在实现过程中需要注意用户体验和可访问性,以提供更好的交互体验。

    微信小程序实现复选框效果

    微信小程序实现复选框效果的知识点主要包括以下几个方面: 1. 微信小程序的数据绑定和事件处理机制:在微信小程序中,通过数据绑定,可以将页面上的元素与JavaScript中的数据对象绑定,实现动态显示数据。...

    多选框互选

    标签“源码”意味着文章可能包含了实现这一功能的完整代码,而“工具”可能指的是使用了某些辅助工具或库,比如jQuery或Bootstrap,来简化实现过程。在提供的压缩包文件中,`2个多选框互选.htm`可能是包含上述HTML和...

    C# WinForm 自定义CheckBox

    在C#编程环境中,WinForms是一个常用的开发桌面应用程序的框架。在这个框架中,CheckBox控件是经常被用到的一种交互元素,它允许用户通过勾选或取消勾选来表示一种选择状态。本教程将深入讲解如何在WinForms中自定义...

    比较全的JS checkbox全选、取消全选、删除功能代码

    总结来说,这两个方法提供了在JavaScript中处理复选框全选、取消全选和批量删除的基本框架。它们可以通过简单的调用在任何包含复选框的页面上实现这些功能。在实际应用中,开发者可能需要根据具体的需求进行调整,...

    checkbox点击事件修改样式

    总结来说,通过CSS和jQuery,我们可以实现对`checkbox`的样式和行为的完全定制。在这个例子中,我们不仅改变了`checkbox`的外观,还添加了点击事件来同步`checkbox`的选中状态和自定义样式的显示。如果需要在特定...

    delphi Listview复选框checkbox实现单选的功能

    在Delphi中,ListView控件是经常用于展示数据列表的组件。它提供了多种视图模式,包括报告视图,其中可以包含复选框(Checkbox)来实现用户交互。本示例着重讲解如何在ListView中实现复选框的单选功能。...

    jstree中的checkbox默认选中和隐藏示例代码

    jstree复选框自定义显示隐藏和初始化默认选中 首先需要配置 Checkbox plugin plugins : ['checkbox'] 设置默认选中状态(checkbox 选中) state: {checked: true} $.jstree.defaults.checkbox.tie_selection ...

    javascript 事件绑定问题

    input type=”checkbox” name=”check” onclick=”CheckedBox(this)” value=”a” /&gt; 子页面JS: 代码如下: function CreateIOC(text,value) { var o = document.createElement(“a”); o.id = value; o.href ...

    DataGrid控件下拉列表框、日历时间和复选框演示

    DataGrid控件是.net里面应用非常广泛的控件,在实际工作中,经常需要用户在输入数据的时候能够直接从几个备选数据进行选择,就是要嵌入下拉列表框,或者输入日期和时间,就是用到嵌入的DateTimePacker控件,还有使用...

    ListView实现单选多选.zip

    通常配合CheckedTextView或CheckedBox控件使用,以视觉上突出选中状态。 4. **多选模式(Multiple Choice)**: - 多选模式下,用户可以同时选择多个项目。同样通过setChoiceMode()方法,但传入CHOICE_MODE_...

Global site tag (gtag.js) - Google Analytics