散分求教高手关于常见业务的一个逻辑问题,用JavaScript控制流程. 你的意思,是不是A1与B1选择好一个以后,必需要从A2和B2两个中间选,再选3,依次类推?还有,A1,B1只有两个吗?还是还有C1,D1这样很多?如果只有两个的话,干吗不用radio? 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 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读取文本 jquery鼠标经过离开和点击离开事件发生冲突了 网站统计功能,统计受访页面 求一个正则表达,实现如下功能 实现多表格滚动 乱码问题? 求教一个基础问题:一个变量最大能存储多少个字节?? 用梅花雪的MzTreeView10中出现的问题 急!!! 求教高手怎么用javascript做倒计时! html中利用iframe嵌入jsp页面的问题 window.open()的疑问! 高手们,有功夫看看这个帖子
服务端通过name取到的是选中的那个radio的value。
为什么不用radio呢,因为radio选了之后就没法取消,这个是弊病
我的设想是当选择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>
如果用户无意选择了一个,或者说选了之后他又发现了错误,不想选了,总不能因为一个RADIO,让他把其他所有写的东西都放弃掉,然后刷新页面把.这样太不人性化.
什么bug?下午要出去,没时间改了
<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>
也谢谢这位大大,我也想过这种实现办法,控制着流程是不错,但是还有一个问题,就是这次选了A1 A2退出去了,下次进来的时候应该A1 A2还是选着的,可以继续往下走啊,但是用这种办法,我总不能每次都只让第一列亮着,其他都Disable掉把.
楼主为什么不用 radio button?
<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>
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>