html页面上的checkbox怎么实现不跳号选择

QAllen 发布于 2013/01/17 18:05
阅读 268
收藏 0
现在有一个需求,如页面上某一列有4个checkbox,1、2、3、4都可以选择但是需连续。也就是不能只选择1、4而跳过2、3。可以选择1、2或者2、3或者1、2、3这种连续的。如果需取消一个中间数那么它之前的也要取消。求提供一个思路。
加载中
0
pyawen
pyawen
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

<input type="checkbox" class="chk_continuous" /> 1
<input type="checkbox" class="chk_continuous" /> 2
<input type="checkbox" class="chk_continuous" /> 3
<input type="checkbox" class="chk_continuous" /> 4 
<input type="checkbox" class="chk_continuous" /> 5

<script type="text/javascript">
	$(document).ready(function() { 
		$(".chk_continuous").click(function() {  
			if(this.checked) {  //选中时处理
				if($(".chk_continuous:checked").length > 1 && !$(this).next("input.chk_continuous").attr("checked") && !$(this).prev("input.chk_continuous").attr("checked") ) 
					$(this).attr("checked", false);				
			} else {  //取消选中时处理
				if($(this).next("input.chk_continuous").attr("checked")) $(this).prevAll("input.chk_continuous:checked").attr("checked", false);
			}  
		});
	});
</script>
0
亭舸翁
亭舸翁
找个数组保存已经选择的checkbox id。然后每个checkbox绑定click事件,判断 1 当前是否是选中的,如果已选中 ,则取消所有的选中,数组清空。 2 若没选中,判断是否和上一个选中的checkbox相邻,不相邻则取消事件传播。否则让默认选中行为发生,同时把id加入数组  
0
Arrowing
Arrowing

思路:每一个checkbox加一个点击事件,如果点击了该checkbox,就判断这个checkbox是否存在前一个checkbox,存在并选中的话,该checkbox选中

同理,如果点击了某checkbox,就判断这个checkbox是否存在下一个checkbox

如果下一个checkbox是选中的,那么所有的checkbox都取消选中


0
QAllen
QAllen
感谢楼上几位,虽然没法用jquery。
返回顶部
顶部