组合排列算法

飞翔的荷兰人 2014-02-21 03:20:38
有个需求是页面上有多个input元素,其中最多只能选择2个。

页面类似这种,比如一开始选中2个,后面选中第三个的时候,前面2个会被取消。
还有就是input个数不固定。
...全文
915 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
飞翔的荷兰人 2014-03-24
  • 打赏
  • 举报
回复
谢谢楼上的各位了。
嘻哈大咖秀 2014-02-22
  • 打赏
  • 举报
回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript">
		
		var chb = new Array();
		var nameArr = new Array();
		$(document).ready(function(){
			
			$("#FlashIndicatorContainer .group input").each(function(){
				nameArr.push($(this).attr('name'));

				$(this).click(function(){
					var thisName = $(this).attr('name');
					
					if($(this).attr('checked')){
						
						if(chb.length >= 2){
							chb.shift();
							chb.push(thisName);
							$("input").attr('checked',false);
							for(var n=0;n<nameArr.length;n++){
								
								if($.inArray(chb[n],nameArr) != -1 && chb[n] != 'undefined'){
									console.log(nameArr[$.inArray(chb[n],nameArr)])
									$("input[name='"+nameArr[$.inArray(chb[n],nameArr)]+"']").attr('checked',true);
								}           		
								
							}
						}else{
							chb.push(thisName);
						}
					}
					else
					{
						chb.remove(thisName);
					}

				})
				
			});
		})
		Array.prototype.in_array = function(e)  
		{  

			for(i=0;i<this.length && this[i]!=e;i++);  
				return !(i==this.length);  
		}
		Array.prototype.indexOf = function(val) {
			for (var i = 0; i < this.length; i++) {
				if (this[i] == val) return i;
			}
			return -1;
		};
		Array.prototype.remove = function(val) {
			var index = this.indexOf(val);
			if (index > -1) {
				this.splice(index, 1);
			}
		};
	</script>


</head>
<body>
	<div class="flash-indicator-container layer" id="FlashOptionContainer">
		<div id="FlashIndicatorContainer">
			<div class="group clearfix">
				<label for="pv_count">
					<input name="pv_count" value="pv_count" type="checkbox" title="浏览量(PV)"  id="pv_count">
					浏览量(PV)
				</label>
				<label for="visitor_count">
					<input name="visitor_count"  value="visitor_count" type="checkbox" title="访客数(UV)" id="visitor_count">
					访客数(UV)
				</label>
				<label for="ip_count">
					<input name="ip_count"  value="ip_count" type="checkbox" title="IP数" id="ip_count">
					IP数
				</label>
			</div>
			<div class="separator"></div>
			<div class="group clearfix">
				<label for="bounce_ratio">
					<input name="bounce_ratio"  value="bounce_ratio" type="checkbox" title="跳出率" id="bounce_ratio">
					跳出率
				</label>
				<label for="avg_visit_time">
					<input name="avg_visit_time"  value="avg_visit_time" type="checkbox" title="平均访问时长" id="avg_visit_time">
					平均访问时长
				</label>
			</div>
		</div>
		<div id="FlashTip" class="text">
			(可同时选择<span id="MaxFlashIndicatorNum" class="max-flash-indicator-num">2</span>项)
		</div>
	</div>
</body>
</html>
飞翔的荷兰人 2014-02-21
  • 打赏
  • 举报
回复
[quote=引用 4 楼 microlab2009 的回复:] 引用了这段代码,修改了下差不多达到了要求的功能。还差一点就是 当选中只有一个的时候,点击的时候不要取消。 代码如下
<script type="text/javascript">
var chb = new Array();
$(document).ready(function(){
  	$("#FlashIndicatorContainer .group input").on('click',function(){
     	var thisName = $(this).attr('name');
      	$("#FlashIndicatorContainer .group input").each(function(){
			var n= $(this).attr('name');
			if(!chb.in_array(n) && n != thisName && $(this).attr('checked') == 'checked')
				 chb.push(n);
          	});
        		
       	if($(this).attr('checked') == 'checked')
     			$(this).attr('checked',false);
        	else
        		$(this).attr('checked','checked');	  
      	 if($(this).attr('checked') == 'checked')
			 {
				 if(chb.length >= 2){
		            chb.shift();
		            chb.push(thisName);
			     }else{
			         chb.push(thisName);
			   	}
			}
			 else
			{
				 chb.remove(thisName);
			}
         $("#FlashIndicatorContainer .group input").each(function(){
				var name = $(this).attr('name');
				if(chb.in_array(name))
				{
					$(this).attr('checked','checked');
				}
				else
				{
					$(this).attr('checked',false);
				}		
            });
           });
       })
Array.prototype.in_array = function(e)  
{  
	for(i=0;i<this.length && this[i]!=e;i++);  
	return !(i==this.length);  
}
Array.prototype.indexOf = function(val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == val) return i;
    }
    return -1;
};
Array.prototype.remove = function(val) {
    var index = this.indexOf(val);
    if (index > -1) {
        this.splice(index, 1);
    }
};
</script>
KeepSayingNo 2014-02-21
  • 打赏
  • 举报
回复
我帮你做了一个例子,你运行试试


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
    <title></title>
</head>
<body>
<script type="text/javascript" language="javascript">
$(function(){

$(".c").bind("click", function () {   
        var num=0;  
        
		$('.c').each(function () {
        
        if ($(this)[0].checked == true) {
            num = num +1;
        }});
		
		if(num>2)
		{
		  $('.c').each(function () {
        
            $(this)[0].checked = false;});
		}
	});
});

</script>

<input type="checkbox" class="c"  value="100"  />$100
<input type="checkbox" class="c"  value="50"/>$50
<input type="checkbox" class="c"  value="150"/>$150
</body>
</html>
zhjdg 2014-02-21
  • 打赏
  • 举报
回复
$('checkbox[name=tangram-flash-indicator]') [type=checkbox][name=tangram-flash-indicator]
飞翔的荷兰人 2014-02-21
  • 打赏
  • 举报
回复
引用 8 楼 showbo 的回复:
[quote=引用 7 楼 hjt321658 的回复:] [quote=引用 6 楼 showbo 的回复:] 上面的这段页面代码是点击某个div弹出来的。 js已经导入了
你要在弹出层后再绑定事件,要不改为live动态绑定[/quote] $('checkbox[name=tangram-flash-indicator]').on('click',function(){ if(this.checked&&$('checkbox[name=tangram-flash-indicator]:checked').size()>2)$('checkbox[name=tangram-flash-indicator]:checked').not(this).attr('checked',false); }); 用的1.9版本的jquery库,已经用on绑定了
Go 旅城通票 2014-02-21
  • 打赏
  • 举报
回复
引用 7 楼 hjt321658 的回复:
[quote=引用 6 楼 showbo 的回复:] 上面的这段页面代码是点击某个div弹出来的。 js已经导入了
你要在弹出层后再绑定事件,要不改为live动态绑定
飞翔的荷兰人 2014-02-21
  • 打赏
  • 举报
回复
[quote=引用 6 楼 showbo 的回复:] 上面的这段页面代码是点击某个div弹出来的。 js已经导入了
Go 旅城通票 2014-02-21
  • 打赏
  • 举报
回复
你导入jquery没有。。
<div class="flash-indicator-container layer" id="FlashOptionContainer">
                        <div id="FlashIndicatorContainer">
                        <div class="group clearfix">
                            <label for="pv_count">
                                <input name="pv_count" value="pv_count" type="checkbox" title="浏览量(PV)" checked="checked" id="pv_count">
                                浏览量(PV)
                            </label>
                            <label for="visitor_count">
                                <input name="visitor_count"  value="visitor_count" type="checkbox" title="访客数(UV)" id="visitor_count">
                                访客数(UV)
                            </label>
                            <label for="ip_count">
                                <input name="ip_count"  value="ip_count" type="checkbox" title="IP数" id="ip_count">
                                IP数
                            </label>
                    </div>
                    <div class="separator"></div>
                    <div class="group clearfix">
                        <label for="bounce_ratio">
                            <input name="bounce_ratio"  value="bounce_ratio" type="checkbox" title="跳出率" id="bounce_ratio">
                            跳出率
                        </label>
                        <label for="avg_visit_time">
                            <input name="avg_visit_time"  value="avg_visit_time" type="checkbox" title="平均访问时长" id="avg_visit_time">
                            平均访问时长
                        </label>
                    </div>
                </div>
                <div id="FlashTip" class="text">
                        (可同时选择<span id="MaxFlashIndicatorNum" class="max-flash-indicator-num">2</span>项)
                </div>
                </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    $(function () {
        $('#FlashOptionContainer input').click(function () {
            if (this.checked && $('#FlashOptionContainer input:checked').size() > 2) $('#FlashOptionContainer input:checked').not(this).attr('checked', false);
        })
    });
</script>
飞翔的荷兰人 2014-02-21
  • 打赏
  • 举报
回复
引用 3 楼 showbo 的回复:
$('checkbox选择器').click(function(){
  if(this.checked&&$('checkbox选择器:checked').size()>2)$('checkbox选择器:checked').not(this).attr('checked',false);
})
版主,用了这段代码没效果 我的js代码如下: $('checkbox[name=tangram-flash-indicator]').on('click',function(){ if(this.checked&&$('checkbox[name=tangram-flash-indicator]:checked').size()>2)$('checkbox[name=tangram-flash-indicator]:checked').not(this).attr('checked',false); }); html代码
<div class="flash-indicator-container layer" id="FlashOptionContainer">
						<div id="FlashIndicatorContainer">
						<div class="group clearfix">
							<label for="pv_count">
								<input name="tangram-flash-indicator" value="pv_count" type="checkbox" title="浏览量(PV)" checked="checked" id="pv_count">
								浏览量(PV)
							</label>
							<label for="visitor_count">
								<input name="tangram-flash-indicator"  value="visitor_count" type="checkbox" title="访客数(UV)" id="visitor_count">
								访客数(UV)
							</label>
							<label for="ip_count">
								<input name="tangram-flash-indicator"  value="ip_count" type="checkbox" title="IP数" id="ip_count">
								IP数
							</label>
					</div>
					<div class="separator"></div>
					<div class="group clearfix">
						<label for="bounce_ratio">
							<input name="tangram-flash-indicator"  value="bounce_ratio" type="checkbox" title="跳出率" id="bounce_ratio">
							跳出率
						</label>
						<label for="avg_visit_time">
							<input name="tangram-flash-indicator"  value="avg_visit_time" type="checkbox" title="平均访问时长" id="avg_visit_time">
							平均访问时长
						</label>
					</div>
				</div>
				<div id="FlashTip" class="text">
	    				(可同时选择<span id="MaxFlashIndicatorNum" class="max-flash-indicator-num">2</span>项)
	    		</div>
				</div>
嘻哈大咖秀 2014-02-21
  • 打赏
  • 举报
回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    var chb = new Array();
    	$(document).ready(function(){
    		$.each($(":checkbox"),function(){
    			$(this).click(function(){
    				var thisName = $(this).attr('name');
	    			if(chb.length >= 2){
	    				chb.shift();
	    				chb.push(thisName);
	    			}else{
	    				chb.push(thisName);
	    			}
	    			console.log(chb)	
    			})	
    		})
    	})
    	
    </script>

</head>
<body>
    <div>
    	<input type="checkbox" value="1" name="aa" /> 浏览量 <input type="checkbox" value="1" name="bb" /> 访问次数 <input type="checkbox" value="1" name="cc" /> 访问数 <input type="checkbox" value="1" name="dd" /> 跳出率 <input type="checkbox" value="1" name="ee" /> 转化率 <input type="checkbox" value="1" name="ff" /> IP数 <input type="checkbox" value="1" name="ll" /> 平均访问时长 <input type="checkbox" value="1" name="mm" /> 平均访问次数
    </div>
</body>
</html>
Go 旅城通票 2014-02-21
  • 打赏
  • 举报
回复
$('checkbox选择器').click(function(){
  if(this.checked&&$('checkbox选择器:checked').size()>2)$('checkbox选择器:checked').not(this).attr('checked',false);
})
飞翔的荷兰人 2014-02-21
  • 打赏
  • 举报
回复
<div class="flash-indicator-container layer" id="FlashOptionContainer">
						<div id="FlashIndicatorContainer">
						<div class="group clearfix">
							<label for="pv_count">
								<input name="pv_count" value="pv_count" type="checkbox" title="浏览量(PV)" checked="checked" id="pv_count">
								浏览量(PV)
							</label>
							<label for="visitor_count">
								<input name="visitor_count"  value="visitor_count" type="checkbox" title="访客数(UV)" id="visitor_count">
								访客数(UV)
							</label>
							<label for="ip_count">
								<input name="ip_count"  value="ip_count" type="checkbox" title="IP数" id="ip_count">
								IP数
							</label>
					</div>
					<div class="separator"></div>
					<div class="group clearfix">
						<label for="bounce_ratio">
							<input name="bounce_ratio"  value="bounce_ratio" type="checkbox" title="跳出率" id="bounce_ratio">
							跳出率
						</label>
						<label for="avg_visit_time">
							<input name="avg_visit_time"  value="avg_visit_time" type="checkbox" title="平均访问时长" id="avg_visit_time">
							平均访问时长
						</label>
					</div>
				</div>
				<div id="FlashTip" class="text">
	    				(可同时选择<span id="MaxFlashIndicatorNum" class="max-flash-indicator-num">2</span>项)
	    		</div>
				</div>
嘻哈大咖秀 2014-02-21
  • 打赏
  • 举报
回复
这个在js就可以处理的吧 吧html贴出来

87,920

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧