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

来源：互联网发布：血源诅咒妹子捏脸数据编辑：程序博客网时间：2024/05/16 12:35

直接上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

0 0