欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQuery 实现多个checkbox 只选中一个

程序员文章站 2022-05-22 13:30:57
JQuery 实现多个checkbox 只选中一个 check1 check2 check3 check1 check2 check3 ... ......
<!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="images/logo-nyt.png" /></li>
    <li><img src="images/logo-microsoft.png" /></li>    
    <li><img src="images/logo-ebay.png" /></li>     
    <li><img src="images/logo-hp.png" /></li> 
    <li><img src="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="images/logo-adidas.png" /></li>   
    <li><img src="images/logo-nike.png" /></li> 
    <li><img src="images/logo-amazon.png" /></li> 
    <li><img src="images/logo-spotify.png" /></li> 
    <li><img src="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="images/1.jpg" /></li>
    <li><img src="images/2.jpg" /></li>
    <li><img src="images/3.jpg" /></li>
    <li><img src="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="images/chevrolet.png" /></li>
    <li><img src="images/ford.png" /></li>
    <li><img src="images/aston-martin.png" /></li>
    <li><img src="images/mini.png" /></li>
    <li><img src="images/lamborghini.png" /></li>
    <li><img src="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>