散分求教高手关于常见业务的一个逻辑问题,用JavaScript控制流程.

1楼的意见也有理，只能先一个的话应该用radio，radio只要name相同就是一组，只能选一个。
服务端通过name取到的是选中的那个radio的value。

跳不走的意思就选了A1 B1中的一个之后不可以直接选A3 B3中的一个就提交到数据库,但是可以选择A1 B1中一个后选择A2 B2提交,这样认为是还未完成.
为什么不用radio呢,因为radio选了之后就没法取消,这个是弊病

另外CheckBox只有A B2组
我的设想是当选择A或者B其中一个的时候,hidden一个值,最后提交的时候每行的HIDDEN应该是11111000这种形式,如果出现11110011这样就不给他过,不过感觉挺麻烦的,想跟大家讨论下,有没有更好的办法.

这样子的么？
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
select{width:150px;}
</style>
</head>
<body>
a1<input type="checkbox" name="a1" />b1<input type="checkbox" name="b1" /><br/>
a2<input type="checkbox" name="a2" />b2<input type="checkbox" name="b2" /><br/>
a3<input type="checkbox" name="a3" />b3<input type="checkbox" name="b3" /><br/>
a4<input type="checkbox" name="a4" />b4<input type="checkbox" name="b4" /><br/>
a5<input type="checkbox" name="a5" />b5<input type="checkbox" name="b5" /><br/>
a6<input type="checkbox" name="a6" />b6<input type="checkbox" name="b6" /><br/>
<button onclick="fun()">提交</button>
<script type="text/javascript">
var checkbox = document.getElementsByTagName("input");
var result = {};
var last = 0;
for(var i=0;i<checkbox.length;i++)
{
checkbox[i].onclick = function()
{
var index = parseInt(this.name.replace(/\D+/,""),10);
if(index-last!=1 && index!=last)
{
alert("请依次选择");
return false;
}
else
{
last = index;
}

var flag = result[index];
if(flag)
{
if(flag==this.name)
{
result[index]==null;
return;
}
else
{
document.getElementById(flag).checked = false;
}
}

result[index] = this.name;
}
}function fun()
{
var tmp = null;
for(var index in tmp)
{
if(tmp==null)
tmp = index;
else
{
if(index-tmp!=1)
{
alert("没有按顺序来");
return false;
}
}
}
}
</script>
</body>
</html>

首先谢谢这个大大给出解决办法,但是你的代码还是有点小BUG,有些时候出来的情况不太对,我再去查看下

如果用户无意选择了一个,或者说选了之后他又发现了错误,不想选了,总不能因为一个RADIO,让他把其他所有写的东西都放弃掉,然后刷新页面把.这样太不人性化.

什么bug？下午要出去，没时间改了

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> </title>
<script>
function change(n){
var obj1 = document.getElementById("A"+n);
var obj2 = document.getElementById("B"+n);
if(!obj1.checked && !obj2.checked){
for(var i=n+1;i<6;i++){
document.getElementById("A"+i).disabled = 'disabled';
document.getElementById("B"+i).disabled = 'disabled';
}
}else{
document.getElementById("A"+(n+1)).disabled = '';
document.getElementById("B"+(n+1)).disabled = '';
}
}
</script>
</head>
<body>
<input type="checkbox" name="A1" id="A1" onClick="change(1)">A1  <input type="checkbox" name="B1" id="B1" onClick="change(1)">B1<br>
<input type="checkbox" name="A2" id="A2" onClick="change(2)" disabled>A2  <input type="checkbox" name="B2" id="B2" onClick="change(2)" disabled>B2<br>
<input type="checkbox" name="A3" id="A3" onClick="change(3)" disabled>A3  <input type="checkbox" name="B3" id="B3" onClick="change(3)" disabled>B3<br>
<input type="checkbox" name="A4" id="A4" onClick="change(4)" disabled>A4  <input type="checkbox" name="B4" id="B4" onClick="change(4)" disabled>B4<br>
<input type="checkbox" name="A5" id="A5" onClick="change(5)" disabled>A5  <input type="checkbox" name="B5" id="B5" onClick="change(5)" disabled>B5<br>
</body>
</html>

这样我也想过了,但是我这个里面很复杂,首先总共有多少个不确定,然后中间还有是些是Special的,需要加特别处理,特别处理中还有一些是直接让一行的CheckBox直接Disabled的,这样他就不能往下走.

也谢谢这位大大,我也想过这种实现办法,控制着流程是不错,但是还有一个问题,就是这次选了A1 A2退出去了,下次进来的时候应该A1 A2还是选着的,可以继续往下走啊,但是用这种办法,我总不能每次都只让第一列亮着,其他都Disable掉把.

有一个疑问，
楼主为什么不用 radio button?

已经解决了,还是用的笨办法,大概介绍下思路,当选中一行中的一个checkbox的时候把一个hidden 的值赋为1,同时把另外一个disable掉,当取消的时候把这个值赋为0,同时取消另外一个的disable,然后当提交的时候,取得相同Name的hidden值的数组,正常的话应该是11110000这种形式,当出现111000111(即用户跳过某个选向)的这种情况的时候提示错误,请用户回去继续选择.同时页面加载的时候根据前面是否选择给hidden赋值,这样第二次进来的时候hidden也有默认值,提交的时候不会忽略这些选项.同时当有Special的时候,这一行默认disable掉,用户无法选择这一行,自然也无法跳过这一歩,就完成了流程控制.15楼的显示办法是不错的,但是实现起来发现要考虑的条件实在太多.还是放弃了,等用户提交的时候统一再做验证.再次谢谢各位热心的大大们.

try this one ,hope helpful to u
<script type="text/javascript">
Function.prototype.bind = function(obj){
var self = this;
return function(){
self.apply(obj,arguments);
}
}function $(name){
if(document.getElementById(name)) return document.getElementById(name);
else if(document.getElementsByName(name) && document.getElementsByName(name)[0]) return document.getElementsByName(name)[0];
else return null;
}function node(initArray){
this.items = initArray ? initArray : new Array();
this.next = null;
for(var item in this.items) this.items[item].onclick = this.onChange.bind(this);
}node.prototype.add = function(item){
this.items.push(item);
item.onclick = this.onChange;
}node.prototype.disable = function(){
for(var item in this.items){
this.items[item].checked = false;
this.items[item].disabled = true;
}
if(this.next != null)this.next.disable();
}node.prototype.enable = function(){
for(var item in this.items) this.items[item].disabled = false;
}node.prototype.onChange = function(){
var enable = false;
for(var item in this.items) enable = enable || this.items[item].checked;
if(this.next!=null){
if(enable) this.next.enable();
else this.next.disable();
}
}node.prototype.dispose = function(){
if(this.next != null) this.next.clear();
this.items = null;
}function specialForm(initNode){
this.header = initNode;
this.last = initNode;
}specialForm.prototype.add = function(node){
this.last.next = node;
this.last = this.last.next;
}specialForm.prototype.dispose = function(){
this.header.clear();
}specialForm.prototype.done = function(){
this.header.onChange();
}window.onload = function(){
var grp1 = [$("A1"),$("B1")];
var grp2 = [$("A2"),$("B2")];
var grp3 = [$("A3"),$("B3")];
var grp4 = [$("A4"),$("B4")];
var grp5 = [$("A5"),$("B5")];

var sForm = new specialForm(new node(grp1));
sForm.add(new node(grp2));
sForm.add(new node(grp3));
sForm.add(new node(grp4));
sForm.add(new node(grp5));
sForm.done();
}</script><form action="" method="post">
1. <input type="checkbox" name="A1"> A1    <input type="checkbox" name="B1"> B1    <br>
2. <input type="checkbox" name="A2"> A2    <input type="checkbox" name="B2"> B2    <br>
3. <input type="checkbox" name="A3"> A3    <input type="checkbox" name="B3"> B3    <br>
4. <input type="checkbox" name="A4"> A4    <input type="checkbox" name="B4"> B4    <br>
5. <input type="checkbox" name="A5"> A5    <input type="checkbox" name="B5"> B5    <br>
</form>

给每个组合加上同一个名字
点下面的拿到上面的两个判断checked是不是true 就可以了

呵呵,修改了一下,可以初始化
<script type="text/javascript">
Function.prototype.bind = function(obj){
var self = this;
return function(){
self.apply(obj,arguments);
}
}function $(name){
if(document.getElementById(name)) return document.getElementById(name);
else if(document.getElementsByName(name) && document.getElementsByName(name)[0]) return document.getElementsByName(name)[0];
else return null;
}function node(initArray){
this.items = initArray ? initArray : new Array();
this.next = null;
for(var item in this.items) this.items[item].onclick = this.onChange.bind(this);
}node.prototype.add = function(item){
this.items.push(item);
item.onclick = this.onChange;
}node.prototype.disable = function(){
for(var item in this.items){
this.items[item].checked = false;
this.items[item].disabled = true;
}
if(this.next != null)this.next.disable();
}node.prototype.enable = function(){
for(var item in this.items) this.items[item].disabled = false;
this.onChange();
}node.prototype.onChange = function(){
var enable = false;
for(var item in this.items) enable = enable || this.items[item].checked;
if(this.next!=null){
if(enable) this.next.enable();
else this.next.disable();
}
}node.prototype.dispose = function(){
if(this.next != null) this.next.clear();
this.items = null;
}function specialForm(initNode){
this.header = initNode;
this.last = initNode;
}specialForm.prototype.add = function(node){
this.last.next = node;
this.last = this.last.next;
}specialForm.prototype.dispose = function(){
this.header.clear();
}specialForm.prototype.done = function(){
this.header.onChange();
}window.onload = function(){
var grp1 = [$("A1"),$("B1")];
var grp2 = [$("A2"),$("B2")];
var grp3 = [$("A3"),$("B3")];
var grp4 = [$("A4"),$("B4")];
var grp5 = [$("A5"),$("B5")];

var sForm = new specialForm(new node(grp1));
sForm.add(new node(grp2));
sForm.add(new node(grp3));
sForm.add(new node(grp4));
sForm.add(new node(grp5));
sForm.done();
}</script><form action="" method="post">
1. <input type="checkbox" name="A1" checked="checed"> A1    <input type="checkbox" name="B1"> B1    <br>
2. <input type="checkbox" name="A2"> A2    <input type="checkbox" checked="checed" name="B2"> B2    <br>
3. <input type="checkbox" name="A3"> A3    <input type="checkbox" name="B3"> B3    <br>
4. <input type="checkbox" name="A4"> A4    <input type="checkbox" name="B4"> B4    <br>
5. <input type="checkbox" name="A5"> A5    <input type="checkbox" name="B5"> B5    <br>
</form>

给你一个简单方法：a1<input type="checkbox" id="a1"  name="a1" onclick='versaClcik(this.id)' />
b1<input type="checkbox" id="b1"  name="b1" onclick='versaClcik(this.id)' />
<br>
a2<input type="checkbox" id="a2"  name="a2" onclick='versaClcik(this.id)' />
b2<input type="checkbox" id="b2"  name="b2" onclick='versaClcik(this.id)' />
<br>
a3<input type="checkbox" id="a3"  name="a3" onclick='versaClcik(this.id)' />
b3<input type="checkbox" id="b3"  name="b3" onclick='versaClcik(this.id)' />
<br>
a4<input type="checkbox" id="a4"  name="a4" onclick='versaClcik(this.id)' />
b4<input type="checkbox" id="b4"  name="b4" onclick='versaClcik(this.id)' />
<br>
a5<input type="checkbox" id="a5"  name="a5" onclick='versaClcik(this.id)' />
b5<input type="checkbox" id="b5"  name="b5" onclick='versaClcik(this.id)' />
<button onclick="chkselect()">提交</button><script type="text/javascript">
var total=0;
function $(id){return document.getElementById(id);}
function versaClcik(id){
  s=id.replace(/\d+/g,'');//alert(s)
  num=id.match(/\d+/g);//alert(num)
  vID=s=='b'?'a'+num:'b'+num;  //;alert(vID)
  if (num>1){
    if(!$('a'+(num-1)).checked&&!$('b'+(num-1)).checked){
      alert('请顺序选择！');   $(id).checked=false;
      return;
    }
  }
  $(vID).checked=$(id).checked?false:true
}function chkselect(){
  for(var i=1;i<6;i++){
    if(!$('a'+i).checked&&!$('b'+i).checked){alert('第'+i+'项尚未选择！'); return;}
  }
}
</script>

调试易

散分求教高手关于常见业务的一个逻辑问题,用JavaScript控制流程.

解决方案 »