checkbox中,根据获取的文字,如果有互斥选项,提示并取消最后选择的一个选项的实现

本文介绍了一种使用JavaScript实现的互斥角色选择功能。通过定义角色间的互斥关系,在用户尝试选择互斥的角色时,会自动取消选择并给出提示。文章提供了完整的JS和JSP代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

直接上JS中的代码:

// 保存互斥的项目
var rule = [["角色1","角色2"],["角色3","角色4","角色5"]];
function check(obj){
    var checkedVals = new Array(); 
    // 取出所有选择项目
    $("input[name='checkOptions']:checked").each(function() {
        checkedVals.push($(this).next().text());
    });

    $.each(rule,function(index){
        var item = $(this);
        var flag = 0;
        // 判断是否有互斥选项
        for(i=0;i<item.length;i++){  
           if(contains(item[i], checkedVals)){  
               flag++;  
           }  
        }
        // 显示互斥的项目,并提示
        if(flag>=item.length){
            var ruleLabel = rule[index];  
            var promote = "";  
            var labelSize = ruleLabel.length;  
            for(i=0;i<labelSize;i++){  
                if(i < labelSize - 1){  
                   promote += '"' + ruleLabel[i] + '"和';  
                } else {  
                    promote += '"' + ruleLabel[i] + '"';  
                }  
            }  
            alert(promote+"角色,不能同时选中!");  
            $(obj).prop({"checked":false});
            return false;
        }
    });
}
function contains(obj,a) {  
  var i = a.length;  
    while (i--) {  
       if (a[i] == obj) {  
           return true;  
       }  
    }  
    return false;  
}

JSP中,checkbox的代码为:

<input type="checkbox" name="checkOptions" value="0" onclick ="check(this)"/>角色1
<input type="checkbox" name="checkOptions" value="1" onclick ="check(this)"/>角色2 
<input type="checkbox" name="checkOptions" value="2" onclick ="check(this)"/>角色3 
<input type="checkbox" name="checkOptions" value="3" onclick ="check(this)"/>角色4 
<input type="checkbox" name="checkOptions" value="4" onclick ="check(this)"/>角色5 

其中参照了博客:
http://asialee.iteye.com/blog/1420494

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值