JQuery勾选指定name的复选框集合并显示的方法

本文实例讲述了JQuery勾选指定name的复选框集合并显示的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
 $("input[name='love']").click(function () {
 //获得所有name为love的选中的复选框
 var $Checks = $("input[name='love']:checked");
 var arr = new Array();
 //使用了元素的each方法
 //循环Jquery对象里的dom数组
 $Checks.each(function (index, value) {
  //alert(value);
  arr[index] = value.value;
 });
 $("#MessageInfo").text("你选择了"+arr.length+"个爱好,"+arr.join(","));
 });
});
</script>
</head>
<body>
<input type="checkbox" name="love" value="FootBall" />足球
<input type="checkbox" name="love" value="BasketBall" />篮球
<input type="checkbox" name="love" value="VallyBall" />排球
<p id="MessageInfo"></p>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证

    jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> &l

  • jquery操作复选框checkbox的方法汇总

    本文实例汇总了jquery操作复选框checkbox的方法.分享给大家供大家参考.具体分析如下: jquery判断checked的三种方法: 复制代码 代码如下: $("input").attr("checked");   //版本1.6+返回:"checked"或"undefined" ,1.5-返回:true或false  $("input").prop("checked");  /

  • jQuery实现复选框批量选择与反选的方法

    本文实例讲述了jQuery实现复选框批量选择与反选的方法.分享给大家供大家参考.具体实现方法如下: function selectAll(){ $('input[type|=checkbox]').attr('checked','checked'); } function cancelAll(){ $('input[type|=checkbox]').removeAttr('checked'); } 希望本文所述对大家的jQuery程序设计有所帮助.

  • jQuery切换所有复选框选中状态的方法

    本文实例讲述了jQuery切换所有复选框选中状态的方法.分享给大家供大家参考.具体如下: 这段代码非常简单实用,通过链接切换所有checkbox是否选中 var tog = false; // or true if they are checked on load $('a').click(function() { $("input[type=checkbox]").attr("checked",!tog); tog = !tog; }); 希望本文所述对大家的jq

  • jQuery实现统计复选框选中数量

    代码很简介,功能也很简单,但是却很实用,这里就不细说明了直接上代码 jQuery代码: 复制代码 代码如下: function countNum(){           //alert($('input[name=check]:checked').length);          var arrays = new Array();           var items = document.getElementsByName("check");           for(var

  • JQuery判断checkbox是否选中及其它复选框操作方法合集

    一.jquery判断checkbox是否选中及改变checkbox状态 jquery判断checked的三种方法: 复制代码 代码如下: .attr('checked):   //看版本1.6+返回:"checked"或"undefined" ;1.5-返回:true或false .prop('checked'): //16+:true/false .is(':checked'):    //所有版本:true/false//别忘记冒号哦 jquery赋值check

  • JQuery CheckBox（复选框）操作方法汇总

    JQuery CheckBox（复选框）操作方法汇总

    1.   获取单个checkbox选中项(三种写法): 复制代码 代码如下: $("input:checkbox:checked").val() 或者 复制代码 代码如下: $("input:[type='checkbox']:checked").val(); 或者 复制代码 代码如下: $("input:[name='ck']:checked").val(); 2.   获取多个checkbox选中项: 复制代码 代码如下: $('input:

  • JQuery限制复选框checkbox可选中个数的方法

    本文实例讲述了JQuery限制复选框checkbox可选中个数的方法.分享给大家供大家参考.具体分析如下: 由于项目需要限制可批量操作的文件个数 所以写了一段小代码 如果选中个数大于允许的最大个数 其他复选框不能选择 如果小于则所有复选框都能选择 <script type="text/javascript"> $(document).ready(function() { $('input[type=checkbox]').click(function() { $("

  • jquery复选框多选赋值给文本框的方法

    本文实例讲述了jquery复选框多选赋值给文本框的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <title>jquery点击复选框触发事件给input赋值</title><base target="_blank" />  <m

  • JQuery勾选指定name的复选框集合并显示的方法

    本文实例讲述了JQuery勾选指定name的复选框集合并显示的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

  • jQuery.Sumoselect插件实现下拉复选框效果

    简单介绍 jquery.sumoselect是一款跨设备.跨浏览器的jQuery下拉列表框插件.该jQuery下拉列表框插件可以单选,也可以多选.它的样式可以通过CSS文件来自定义.它的最大特点是可以跨设备使用,所有设备上功能都是一致的. 该jQuery下拉列表框插件的特点有: 可以进行单选,也可以进行多选. 可以通过CSS文件来自定义样式. 支持绝大多数的设备. 根据设备智能渲染. 在Android.IOS.Windows和其它设备上会自动渲染出该设备原生样式的下拉列表框. 可以自定义提交数据

  • jquery判断复选框是否被选中的方法

    jquery 判断复选框是否选中以及如何选中的问题做一下总结. 进入正题,还是当页面有如下一组复选框的时候: <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <input type=&q

  • jquery复选框全选/取消示例

    功能: a:实现点击复选框的时候全选所有的子复选框,再点击取消所有复选框的选中状态 b:有一个子复选框选中则父复选框选中 所有子复选框都不选中则父复选框不选中 复制代码 代码如下: /** * 全选函数 * @param mainId 主复选框id * @param klass 下属复选框的class */function selectAll(mainId,klass){ $("." + klass).each(function(){     if($("#" +

  • jQuery实现全选、反选和不选功能

    本文给大家分享一段基于jQuery的全选.反选和不选功能的代码,适用于网页多选后需要进行批量操作的场景(如批量删除等).文章结合实例,代码简洁,基本覆盖选项选择操作的方方面面,希望可以帮到有需要的WEB爱好者. HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮. <ul id="list"> <li><label><input type="checkbox" val

  • jQuery实现全选、反选和不选功能的方法详解

    本文实例讲述了jQuery实现全选.反选和不选功能的方法.分享给大家供大家参考,具体如下: 适用于网页多选后需要进行批量操作的场景(如批量删除等).如有问题希望大家可以指正.谢谢~~ HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮 <ul id="list"> <li><label><input type="checkbox" value="1"

  • Android复选框CheckBox与开关按钮Switch及单选按钮RadioButton使用示例详解

    目录 前言 一.复选框CheckBox 二.开关按钮Switch 三.单选按钮RadioButton 单选组的用法 前言 CompoundButton在XML文件中主要使用下面两个属性. checked:指定按钮的勾选状态,true表示勾选,false则表示未勾选,默认为未勾选. button:指定左侧勾选图标的图形资源,如果不指定就使用系统的默认图标. CompoundButton在java代码中主要使用下列4种方法. setChecked:设置按钮的勾选状态. setButtonDrawab

  • javascript实现checkbox复选框实例代码

    本文实例介绍了javascript实现checkbox复选框实例代码以及对checkbox复选框进行美化操作,分享给大家供大家参考,具体内容如下 1.checkbox复选框进行美化操作 复选框默认外表的美观度差强人意,能够满足美观度要求不高的页面,但是如果对于页面要求较为精致,那可能就过于勉强了,下面就一段对复选框进行美化的代码实例,希望能够给大家带来一定的帮助. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charse

  • jquery实现勾选复选框触发事件给input赋值

    代码如下: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery点击复选框触发事件给input赋值-柯乐义</title><base target="_blank" /> <style type="text/css"> * { marg

  • jQuery判断复选框是否勾选的原理及示例

    jQuery判断复选框是否勾选的原理及示例

    今天要实现一功能就是:复选框勾选时给input表单赋值,复选框取消时将表单值清除. 效果如图:  实现源码:cyfID为复选框的id 复制代码 代码如下: $("#cyfID").click(function(){ var ischeck=$(this).attr("checked"); if(ischeck==undefined){ //清除输入框 alert(""); }else{ //给输入框赋值 alert("qq")

随机推荐