<!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. 高质量iOS博客推荐

    https://www.jianshu.com/p/ea9fabdc12ed 原文地址 原作者记录了一些高质量ios博客地址,本文只做收藏使用.

  2. iOS app反编译

    对于APP store 上的应用都是加密的了,反编译起来有难度. 对于自己用xcode 编译的ipa 或者是其他渠道下载的ipa包都可以使用反编译工具进行反编译. https://cnbin.gith ...

  3. BZOJ[HNOI2005]狡猾的商人（差分约束）

    1202: [HNOI2005]狡猾的商人 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 4969  Solved: 2496[Submit][Sta ...

  4. CoderForces999D-Equalize the Remainders

    D. Equalize the Remainders time limit per test 3 seconds memory limit per test 256 megabytes input s ...

  5. Orleans的生产环境部署

    这一章非常简单 只要照着官方文档做就行了 文档地址 打好NUGET包后 Sql脚本是在项目下的OrleansAdoNetContent

  6. 【全栈修炼】OAuth2 修炼宝典

    一.OAuth 概念 开放授权(OAuth)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. -- 维基百 ...

  7. redis（3）--redis原理分析

    过期时间设置 在Redis中提供了Expire命令设置一个键的过期时间,到期以后Redis会自动删除它.这个在我们实际使用过程中用得非常多.EXPIRE命令的使用方法为EXPIRE key secon ...

  8. 注解slf4j的日志该用哪个级别

    slf4j的日志级别分为五种 info.debug.error.warn.trane 常用的是这是三个.         info  一般处理业务逻辑的时候使用,就跟 system.err打印一样,用 ...

  9. 异常日志文件errorlong

    #region log ////////////////////use/////////////// /// <summary> /// 异常日志 /// </summary> ...

  10. js中的对象知识总结

    文章目录: 1. 比较两个对象是否相等 1. 比较两个对象是否相等 通过===运算符,只有在两个变量指向同一个对象时才返回true,否则返回false.要想比较两个对象中的内容是否相等,需要利用遍历对 ...