<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name = "viewport" content = "user-scalable=no, width=device-width">

<meta name="apple-mobile-web-app-capable" content="yes" />

<title>JQuery 实现多个checkbox 只选中一个</title>

<meta name="author" content="geovindu,塗聚文,Geovin Du" />

<script src="Scripts/jquery.min.js" type="text/javascript"></script>

</head>

<body>

  <script type="text/javascript">

  $(function() {

   $('#common-form').find('input[type=checkbox]').bind('click', function(){

    var id = $(this).attr("id");

    //当前的checkbox是否选中

    if(this.checked){

    //除当前的checkbox其他的都不选中

    $("#common-form").find('input[type=checkbox]').not(this).attr("checked", false);

     //选中的checkbox数量

     var selectleng = $("input[type='checkbox']:checked").length;

     console.log("选中的checkbox数量"+selectleng);        }

     else{

     //未选中的处理

      console.log("未选中的处理");

      }

       });

})

//http://9bitstudios.github.io/flexisel/

//https://github.com/9bitStudios/flexisel/

</script>

<form id="common-form">

 <input name="H1" type="checkbox"/>check1

  <input name="H2" type="checkbox"/>check2

  <input name="H3" type="checkbox"/>check3

  </form>  

  <form id="form1" name="form1" class="form1"  method="post"  action="SaveReQuestTickets.aspx?Action=Add&ProjectID=23">

  <input name="H1" type="checkbox" id="H1" value="1"/>check1

  <input name="H2" type="checkbox" id="H2" value="2"/>check2

  <input name="H3" type="checkbox" id="H3" value="3"/>check3

  </form>

    <script type="text/javascript">

 $(function() {  $("#form1").find('input[type=checkbox]').bind('click', function(){

  var id = $(this).attr("id");                //当前的checkbox是否选中

   if(this.checked){            //除当前的checkbox其他的都不选中

    $("#form1").find('input[type=checkbox]').not(this).attr("checked", false);                         //选中的checkbox数量

    var selectleng = $("input[type='checkbox']:checked").length;

     console.log("选中的checkbox数量"+selectleng);

     }

     else

     {            //未选中的处理

     console.log("未选中的处理");

      }

       });

       })

</script>

</body>

</html>

　　

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name = "viewport" content = "user-scalable=no, width=device-width">

<meta name="apple-mobile-web-app-capable" content="yes" />

<title>Flexisel - A responsive jQuery Carousel</title>

<meta name="author" content="geovindu,塗聚文,Geovin Du" />

<link href="css/style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="js/jquery.flexisel.js"></script>

</head>

<body>

<h1>Flexisel</h1>

<p>Flexisel will adapt responsively as the screen width gets smaller...</p>

<ul id="flexiselDemo1">

    <li><img src="data:images/logo-nyt.png" /></li>

    <li><img src="data:images/logo-microsoft.png" /></li>

    <li><img src="data:images/logo-ebay.png" /></li>

    <li><img src="data:images/logo-hp.png" /></li>

    <li><img src="data:images/logo-youtube.png" /></li>

</ul>

<div class="clearout"></div> 

<p>You can also change the number of items shown depending on the screen width.</p>

<ul id="flexiselDemo2">

    <li><img src="data:images/logo-adidas.png" /></li>

    <li><img src="data:images/logo-nike.png" /></li>

    <li><img src="data:images/logo-amazon.png" /></li>

    <li><img src="data:images/logo-spotify.png" /></li>

    <li><img src="data:images/logo-android.png" /></li>

</ul>

<div class="clearout"></div>

<p>Other options include autoplay, number of items to scroll, animation speed when scrolling right and left, initial number of visible items, and more!</p>   

<ul id="flexiselDemo3">

    <li><img src="data:images/1.jpg" /></li>

    <li><img src="data:images/2.jpg" /></li>

    <li><img src="data:images/3.jpg" /></li>

    <li><img src="data:images/4.jpg" /></li>

</ul>    

<div class="clearout"></div>

<p>And you can set whether you want the slider to be infinite or not.</p>

<ul id="flexiselDemo4">

    <li><img src="data:images/chevrolet.png" /></li>

    <li><img src="data:images/ford.png" /></li>

    <li><img src="data:images/aston-martin.png" /></li>

    <li><img src="data:images/mini.png" /></li>

    <li><img src="data:images/lamborghini.png" /></li>

    <li><img src="data:images/ferrari.png" /></li>

</ul> 

<script type="text/javascript">

//http://9bitstudios.github.io/flexisel/

//https://github.com/9bitStudios/flexisel/

$(window).load(function() {

    $("#flexiselDemo1").flexisel();

    $("#flexiselDemo2").flexisel({

        visibleItems: 4,

        itemsToScroll: 3,

        animationSpeed: 200,

        infinite: true,

        navigationTargetSelector: null,

        autoPlay: {

            enable: true,

            interval: 5000,

            pauseOnHover: true

        },

        responsiveBreakpoints: {

            portrait: {

                changePoint:480,

                visibleItems: 1,

                itemsToScroll: 1

            },

            landscape: {

                changePoint:640,

                visibleItems: 2,

                itemsToScroll: 2

            },

            tablet: {

                changePoint:768,

                visibleItems: 3,

                itemsToScroll: 3

            }

        },

        loaded: function(object) {

            console.log('Slider loaded...');

        },

        before: function(object){

            console.log('Before transition...');

        },

        after: function(object) {

            console.log('After transition...');

        },

        resize: function(object){

            console.log('After resize...');

        }

    });

    $("#flexiselDemo3").flexisel({

        visibleItems: 5, //显示多少个图片

         itemsToScroll: 1,

        animationSpeed: 400,

        infinite: true,

        navigationTargetSelector: null,

        autoPlay: {

            enable: true,

            interval: 5000,

            pauseOnHover: true

        },

        responsiveBreakpoints: {

      portrait: {

        changePoint:480,

        visibleItems: 1,

        itemsToScroll: 1

      },

        landscape: {

        changePoint:640,

        visibleItems: 2,

        itemsToScroll: 2

      },

        tablet: {

        changePoint:768,

        visibleItems: 3,

        itemsToScroll: 3

      }

    }  

    });

    $("#flexiselDemo4").flexisel({

        infinite: false

    });    

});

</script>

</body>

</html>

　　

JQuery 实现多个checkbox 只选中一个的更多相关文章

  1. JQuery 多个checkbox 只选中一个

    <form id="common-form"> <input name="check1" type="checkbox"/ ...

  2. Jquery实现页面上所有的checkbox只能选中一个

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  3. jquery 多选框 checkbox 获取选中的框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. jquery中如何判断checkbox是否选中

    jquery代码: <script> $(document).ready(function() { $('#checkbox-id').click(function() { if($('# ...

  5. （转）jquery serialize表单序列化，当radio或checkbox 未选中时，没有序列化到对象中的原因分析和解决方案 - ghostsf

    相信很多人都用过jq的表单序列化serialize()方法,因为这能很方便地帮你把表单里所有的非禁用输入控件序列化为 key/value 对象,不需要你再去一个个地拼接参数了. 这是一个很好用的函数, ...

  6. js中对radio和checkbox是否选中的判断

    一.js判断checkbox 例如:<div class="checkbox" style="width: 150px;"> <label&g ...

  7. ----------jqery和js如何判断checkbox是否选中 --------两个单选按钮如何选一个，且用jquery获取被选的值

    jqery和js如何判断checkbox是否选中 jquery: <div id="divId" class="divTable"> <div ...

  8. [转]jquery如何判断checkbox（复选框）是否被选中,至少被选中一个

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

  9. jquery 实现只能选中一个checkbox，选中当前的去除上一个

    jq 实现只能选中一个checkbox,选中当前的去除上一个. <div id="checkboxed"> <input name="check1&qu ...

随机推荐

  1. Spring源码学习笔记之基于ClassPathXmlApplicationContext进行bean标签解析

    bean 标签在spring的配置文件中, 是非常重要的一个标签, 即便现在boot项目比较流行, 但是还是有必要理解bean标签的解析流程,有助于我们进行 基于注解配置, 也知道各个标签的作用,以及 ...

  2. [TimLinux] Python 使用入门

    1. 为什么用Python 软件质量:Python注重可读性.一致性和软件质量. 提高开发者的效率:Python代码的大小往只有C++/Java代码的1/5 ~ 1/3. 程序的可移植性:绝大多数Py ...

  3. HihoCoder1449 后缀自动机三·重复旋律6

    描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为一段数构成的数列. 现在小Hi想知道一部作品中所有长度为K的旋律中出现次数最多的旋律的出现次数.但是K不是固定的,小Hi想知道对 ...

  4. 记录一些实用的小技巧-JS篇

    1.16进制随机颜色 let color = '#'+Math.random().toString(16).slice(-6) 2.类型判断工具函数 function isType(target, t ...

  5. 最高分辨率行间转移CCD图像传感器 - KAI-47051 演示视频

    http://www.onsemi.cn/PowerSolutions/supportVideo.do?docId=1002912

  6. ES6语法中的class、extends与super的原理

    class 首先, 在JavaScript中, class类是一种函数 class User {    constructor(name) { this.name = name; }    sayHi ...

  7. CentOS下多种方法显示文本行号

    一.创建文本文件 ..}| >test.txt cat test.txt 二.多种方法显示行号 方法一:nl命令(注意:空行不显示行号) [root@WT data]# nl test.txt ...

  8. C语言每日一练——第4题

    一.题目要求 已知数据文件in.dat中有300个四位数,并调用readDat()函数把这些数存储数组a中,编写函数jsValue(),其功能是:求出所有这些四位数是素数的个数cnt,再把所有满足此条 ...

  9. 205K+程序员关注过的问题：为什么不应该使用Java的原始类型？

    在逛 Stack Overflow 的时候,发现了一些访问量像熊耳山一样高的问题,比如说这个:为什么不应该使用Java的原始类型?访问量足足有 205K+,这不得了啊!说明有很多很多的程序员被这个问题 ...

  10. Python Weekly 422

    新闻 Python 采用12个月作为发布周期 链接: https://mail.python.org/archives/list/python-dev@python.org/thread/KE7OS4 ...