<!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 FMDatabase 本地数据库的创建和几个基本使用方法

    转自:http://blog.it985.com/3677.html 使用数据库之前当然要先在网上下载FMDB的库,然后添加到自己的工程里面去.没有的请点击下面的来下载 fmdb 在FrameWork ...

  2. servlet登录练习，并且记录访问次数

    Userservlet登录数据处理,包括访问页面次数处理: package com.szxy.test; import java.io.IOException; import javax.servle ...

  3. ACM-ICPC 2018 焦作赛区网络预赛J题 Participate in E-sports

    Jessie and Justin want to participate in e-sports. E-sports contain many games, but they don't know ...

  4. 1、在aspx.cs后台Response.Write()跳转路径，打开新窗口

    1.Response.Write()打开新窗口 Response.Write(" <script type='text/JavaScript'>window.open('&quo ...

  5. R语言主成分分析（PCA）

    数据的导入 > data=read.csv('F:/R语言工作空间/pca/data.csv') #数据的导入> > ls(data) #ls()函数列出所有变量 [1] " ...

  6. Day 09 函数

    目录 函数 函数的基本概念 为何使用函数 定义函数 什么是参数(形参,parameter) 定义函数的三种形式 无参函数 有参函数 空函数 函数的参数 形参和实参(parameter & ar ...

  7. 理解Vue中的ref和$refs

    参考博客:https://www.cnblogs.com/xumqfaith/p/7743387.html

  8. ssm项目集成

    ssm项目集成 说明:ssm指的是 spring + springMvc+ mybatis,是目前开发比较流行的集成方式,可以较好的实现前后端分离 spring与mybatis的集成,是通过配置文件a ...

  9. NodeJS4-4静态资源服务器实战_优化引入模板引擎

    引入模板引擎(handlebars) cnpm i handlebars 结构大概是这样子的,新建模板dir.tpl文件和route.js dir.tpl <!DOCTYPE html> ...

  10. 将数据库中数据导出为excel表格

    public class Excel { private static Logger logger = LoggerFactory.getLogger(Excel.class); /** * 导出项目 ...