<!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. 大数据之Linux进阶指令

    1.文件内容操作相关命令 cut 根据条件 从命令结果中 提取 对应内容 -c  按字符选取内容 例子:head -2 1.txt | cut -c 5 截取前两行的第五个字符 -d  '分隔符'  ...

  2. UVA-11995

    There is a bag-like data structure, supporting two operations:1 x Throw an element x into the bag.2 ...

  3. linux 安装jmeter

    一 下载jdk sudo apt install oracle-java8-installer 二 网站下载 jmeter 三 对jmeter文件夹 赋权 我都是777 chmod -R 777 ap ...

  4. ARTS-S k8s常用命令

    本地访问minikube的docker eval $(minikube docker-env) 删除statefulset kubectl delete statefulset web --casca ...

  5. iSensor APP 之 摄像头调试 OV5642 续集2

    参考上一篇博客 作为续集,主要测试 RAW格式下的 不同分辨率效果 iSensor APP 之 摄像头调试 OV5642 直接上图吧 720p 拍照效果

  6. Mybatis需要注意的细节

    mybatis第二篇 1.${}和#{}的区别 1.#在传参的时候,会自动拼接单引号:$不能拼接单引号; 2.$传参时,一般不支持jdbcType指定类型的写法;#则可以;如: ​ #{name,jd ...

  7. 我学习Python的经历

    1. 被逼无奈找到了Python Python作为当今非常热的话题,常常被各级别的程序员所提到,也有很多的小白问我,到底啥是Python,它能干啥! 我用Python时间不是特别长,最早使用是在201 ...

  8. Vue大纲

    Vue框架 Vue ---- vue的基本使用 文本/事件/属性指令 补充: js面向对象 js函数 Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性 Vue --- ...

  9. 一款 Postman 的开源替代品： Postwoman

    1. 前言 大家都知道,Postman是一个非常受欢迎的API接口调试工具,提供有Chrome扩展插件版和独立的APP,不过它的很多高级功能都需要付费才能使用. 如果你连Postman都还没有用过,不 ...

  10. 建议2:注意Javascript数据类型的特殊性---(2)慎用JavaScript类型自动转换

    在JavaScript中能够自动转换变量的数据类型,这种转换是一种隐性行为.在自动转换数据类型时,JavaScript一般遵循:如果某个类型的值被用于需要其它类型的值的环境中,JavaScript就自 ...