<!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. HashMap 实现原理解析

    概要 HashMap 最早出现在 JDK 1.2 中,底层基于散列算法实现.HashMap 允许 null 键和 null 值,在计算哈键的哈希值时,null 键哈希值为 0.HashMap 并不保证 ...

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

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

  3. Mybatis获取自动增长Id

    Mybatis获取自动增长Id MyBatis成功插入后获取自动增长的id 1.向xxMapping.xml配置中加上两个配置. <insert id="insertUser" ...

  4. 【算法】342- JavaScript常用基础算法

    一个算法只是一个把确定的数据结构的输入转化为一个确定的数据结构的输出的function.算法内在的逻辑决定了如何转换. 基础算法 一.排序 1.冒泡排序 //冒泡排序function bubbleSo ...

  5. php数组去重、魔术方法、redis常用数据结构及应用场景

    一.用函数对数组进行去重的方法 1.arrau_unique函数的作用 移除数组中重复的值. 将值作为字符串进行排序,然后保留每个值第一次出现的健名,健名保留不变. 第二个参数可以选择排序方式: SO ...

  6. selenium滑块操作

    from selenium import webdriver from selenium.webdriver.common.action_chains import ActionChains from ...

  7. python学习-def

    # 函数# 实现了某一特定功能.# 可以重复使用. # len() 功能:获取长度.# input() 功能: 控制台输入# print() 功能:输出 # 语法 关键字def"" ...

  8. 你不知道的JavaScript（上）this和对象原型（二）

    第三章 对象 1.语法 两种形式定义:声明(文字)形式和构造形式 (1)文字语法大概是这样 1 var myObj = { 2 key: value 3 // ... 4 }; (2)构造形式大概是这 ...

  9. Redis有哪几种数据类型

    Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及zset(sorted set:有序集合). String(字符串) string 是 redi ...

  10. 初步了解JVM第二篇

    在一篇<初步了解JVM第一篇>中,我们已经了解了: 类加载器:负责加载*.class文件,将字节码内容加载到内存中.其中类加载器的类型有如下: 启动类加载器(Bootstrap) 扩展类加 ...