jquery小例子，点击显示个数

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6     <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
 7 </head>
 8 <body>
 9     <input type="checkbox" value="篮球" checked="checked">篮球</input>
10     <input type="checkbox" value="排球">排球</input>
11     <input type="checkbox" value="羽毛球" >羽毛球</input>
12     <input type="checkbox" value="乒乓球">乒乓球</input>
13     <input type="button" value="选中个数"></input>
14     <input type="button"  value="依次显示选中的value"></input>
15
16
17     <script type="text/javascript">
18             $(":button:first").click(function(){
19
20             alert($(":checkbox:checked").size());
21         });
22             $(":button:last").click(function(){
23                 $(":checkbox[checked=‘checked‘]").each(function(){
24                     alert($(this).val());
25                 });
26
27         });
28     </script>
29 </body>
30 </html>

jquery小例子，点击显示个数

时间： 2024-10-13 11:28:20

jquery小例子，点击显示个数的相关文章

jQuery小例子

map遍历数组 //=========for循环遍历========== var arr[1,2,3,4,5]; for(var i=0;i<=arr.length;i++) { arr[i]=arr+1; } //对数组中的每个元素加1 var scores = [10, 20, 30, 40, 50]; var newScore = []; for (var i = 0; i < scores.length; i++) { newScore[newScore.length] = score

用jquery怎么实现点击显示，再一次点击隐藏

html代码: <button>点击</button> <div class="div"></div> css代码: <style> .div{ background-color:black; border: 1px solid red; width:100px; height:100px; display:none } </style> jq代码: <script> $("button&qu

jQuery 二级菜单，一次显示一个小类鼠标点击显示小类

jQuery 二级菜单,一次显示一个小类鼠标点击显示小类本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="arrowlistmenu"> <h3 class="menuheader expandable">表单</h3> <ul class="categoryitems"> <li><a href="

jquery Mobile点击显示加载等待效果

点击某个按钮或链接时,触发等待加载效果: Xml代码 <script> <!-- $(document).bind("mobileinit", function(){ }); $( function() { //默认设置,一个小圈圈在转 $('#default').live( 'tap', function() { $.mobile.loadingMessageTextVisible = false; $.mobile.showPageLoadingMsg();

jQuery如何实现点击下拉菜单的隐藏和显示

jQuery如何实现点击下拉菜单的隐藏和显示:在众多的网站都有这样的效果,那就是点击一个父菜单就会显示下拉子菜单,再点击父菜单,那么子菜单就会隐藏,下面就简单介绍一下如何实现此中效果.这里只介绍如何使用jQuery实现此效果,暂且不考虑效果的美观度,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" co

jquery实现的点击页面其他地方隐藏显示的元素

jquery实现的点击页面其他地方隐藏显示的元素:在实际应用中,可能有这样的效果,那就是有这样一个弹出层,点击层本身的时候,这个层不会隐藏,而点击除去层之外的页面其他地方则会将这个层隐藏,下面就通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="

jQuery 点击显示再次点击隐藏

<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> </head> <body> <div> <span class="color">深咖色</span> <div class="cc"></div

jquery 点击显示隐藏的三种方法

jquery点击显示隐藏的三种方法,从复杂到简单.使用jquery需要引用jquery库,如右所示<script src="jquery-1.11.3.min.js"type="text/javascript"></script>. 旁边按钮随着收缩展开发生状态变化,展开+变—,收缩—变+. 收缩效果: 展开效果: 一.HTML结构(盗用网上的) <body> <li class=&

limitBy过滤器是配合数组使用的，限制数组元素的个数，话不多说，来个小例子。

<div id="box"> <ul> <li v-for="val in arr | limitBy 2"> {{val}} < > </ul> </div> <> var vm=new Vue({ data:{ arr:[1,2,3,4,5] }, methods:{ } }).$mount('#box'); </> 可以看到,我在li标签里面循环数组时,添加了lim