Jquery checkbo自动填充选择

效果:选择一个checbox后,再选择后面的任意一个checkbox,用Jquery自动填充中间的空白checkbox。

主要用到了prop,prev,next方法,获取checkbox的值用prop,不用attr。

<form id="weekcheck">
<input type="checkbox" name="week" value="1"/>
<input type="checkbox" name="week" value="2"/>
<input type="checkbox" name="week" value="3"/>
<input type="checkbox" name="week" value="4"/>
<input type="checkbox" name="week" value="5"/>
<input type="checkbox" name="week" value="6"/>
<input type="checkbox" name="week" value="7"/>
<input type="checkbox" name="week" value="8"/>
<input type="checkbox" name="week" value="9"/>
<input type="submit" value="提交" id="submit_btn">
</form>

<script type="text/javascript">
$('#weekcheck input').click(function(){
  var num=$(this).val();
  if(!num)return;
  if($(this).prop('checked')==true){
    //该box为未选中状态时,former遍历判断
    var ptr=$(this).prev();
    for(var x=num-1;x>=0 && ptr.prop('checked')==false;x--){
      ptr=ptr.prev();
    }
    if(ptr.prop('checked')==true && !ptr.prev().prop('checked')){
      for(var x=ptr.val();x<num;x++){
        ptr=ptr.next();
        ptr.prop('checked',true);
      }
    }
  }
  else{
    //已经选中时则去自动掉选中状态
  }

});
</script>
时间: 2024-07-31 00:04:52

Jquery checkbo自动填充选择的相关文章

邮箱下拉自动填充选择示例代码附图

 这篇文章主要介绍了邮箱下拉自动填充选择的具体实现,需要的朋友可以参考下 1.需要一个js文件:jquery.mailAutoComplete-3.1.js   代码如下: (function($){  $.fn.mailAutoComplete = function(options){  var defaults = {  boxClass: "mailListBox", //外部box样式  listClass: "mailListDefault", //默认的

jQuery 实现自动填充邮箱功能(带下拉提示)_jquery

在做这个功能时候,我参考的是网易注册(http://reg.163.com/reg/reg.jsp?product=urs)中的邮箱栏目所实现的功能与效果.这个功能的目的是使用户在填写邮箱栏目的过程中,在带有邮箱后缀名的菜单的提示下,可以不需要完整输入自己的注册邮箱,达到方便.快捷.友好的效果.在做这个功能的时候,需要充分站在使用者的角度,看怎样设计能够最符合通常情况下人们的使用习惯,又怎样设计反而会让用户感到不便.先来看看功能实现的演示效果图: 在线演示:http://jsfiddle.net

邮箱下拉自动填充选择示例代码附图_javascript技巧

1.需要一个js文件:jquery.mailAutoComplete-3.1.js 复制代码 代码如下: (function($){ $.fn.mailAutoComplete = function(options){ var defaults = { boxClass: "mailListBox", //外部box样式 listClass: "mailListDefault", //默认的列表样式 focusClass: "mailListFocus&q

Js日期选择自动填充到输入框(界面漂亮兼容火狐)

本文为大家写了个很漂亮.兼容火狐的Js日期选择,自动填充到输入框,代码如下,有需要的朋友可以参考下   复制代码 代码如下: <html> <head> <title>很漂亮.兼容火狐的Js日期选择,自动填充到输入框</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <style type="

jquery自动填充勾选框即把勾选框打上true

 jquery自动填充勾选框,即把勾选框打上(true),然后通过ajax方式获得勾选项列表,再把列表内的选项打上 jquery自动填充勾选框,即把勾选框打上(true),然后通过ajax方式获得勾选项列表,再把列表内的选项打上.  代码如下: 下拉框<select name="makemodule" id="makemodule" style='width:130px' onchange='makemoduleSelected()'>  <opt

jquery实现邮箱自动填充提示功能_jquery

邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 核心代码(需要jquery的支持): (function($){ $.fn.mailAutoComplete = function(options){ var defaults = { boxClass: "mailListBox", //外部box样式 listClass: "

Js日期选择自动填充到输入框(界面漂亮兼容火狐)_javascript技巧

复制代码 代码如下: <html> <head> <title>很漂亮.兼容火狐的Js日期选择,自动填充到输入框</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <style type="text/css"> body{font-size:12px;font-family:

jquery自动填充勾选框即把勾选框打上true_jquery

jquery自动填充勾选框,即把勾选框打上(true),然后通过ajax方式获得勾选项列表,再把列表内的选项打上. 复制代码 代码如下: 下拉框<select name="makemodule" id="makemodule" style='width:130px' onchange='makemoduleSelected()'> <option value='1'>1</option> </select> selec

chrome表单自动填充导致input文本框背景变成偏黄色问题解决

chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:   复制代码 代码如下: input:-webkit-autofill { background-color: #FAFFBD; background-image: none; color: #000; } 在有些情况下,这个黄色的背景会影响到我们界面的效果,尤其是在我们给input文本框使用图片背