高分求解如何2组多选框，每组至少选择一个，并将多选值映射成二进制字符串？？？

求助，有如下代码。想实现A组至少选择一个，B组至少选择一个，如何写在同一个脚本里？越简洁越好，有注释更好~~~并且按选中为1，未选中为0，将多选值映射成二进制字符串？例如选择A1B2，则传出1001000？求高手指点，不吝赐教~~<HTML>

<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<form name="sub">
1:<input type="checkbox" name="A" /><br/>
2:<input type="checkbox" name="A" /><br/>
1:<input type="checkbox" name="B" /><br/>
2:<input type="checkbox" name="B" /><br/>
3:<input type="checkbox" name="B" /><br/>
4:<input type="checkbox" name="B" /><br/>
5:<input type="checkbox" name="B" /><br/>
<input type="button" value="submit" onclick="checkbx();"/>
</form>
</BODY>
<script type="text/javascript">
 function checkbx()
 {
  var isChecked = false;
  var boxArr = document.getElementsByName("A");
  var str = "";
  for (var i=0; i<boxArr.length;i++)
  {
  if (boxArr[i].checked)
  {
  boxArr[i].value = 1;
  isChecked = true;
  }
  else
  {
  boxArr[i].value = 0;
  }
  str += boxArr[i].value;
  }
  if(isChecked)
  {
  alert("Success!!");
  }
  else
  {
  alert("Error!!");
  }
  }
  function checkbx()
 {
  var isChecked = false;
  var boxArr = document.getElementsByName("B");
  var str = "";
  for (var i=0; i<boxArr.length;i++)
  {
  if (boxArr[i].checked)
  {
  boxArr[i].value = 1;
  isChecked = true;
  }
  else
  {
  boxArr[i].value = 0;
  }
  str += boxArr[i].value;
  }
  if(isChecked)
  {
  alert("Success!!");
  //alert("boxArr" + i + "====" + boxArr[i].value);
  }
  else
  {
  alert("Error!!");
  }
 } </script>
</HTML>

解决方案 »

  1.   

    <HTML><HEAD>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </HEAD> 
    <BODY>
    <form name="sub">
    1:<input type="checkbox" name="A" /><br/>
    2:<input type="checkbox" name="A" /><br/>
    1:<input type="checkbox" name="B" /><br/>
    2:<input type="checkbox" name="B" /><br/>
    3:<input type="checkbox" name="B" /><br/>
    4:<input type="checkbox" name="B" /><br/>
    5:<input type="checkbox" name="B" /><br/>
    <input type="button" value="submit" id="btn"/>
    </form>
    </BODY>
    <script type="text/javascript">
    document.getElementById('btn').onclick = function(){
    var a = document.getElementsByName('A'),
    b = document.getElementsByName('B'),
    cb = document.getElementsByTagName('input'),
    len = cb.length,is_a = is_b = false,str = '';

    for(var i = 0; i < a.length; i++){
    if(a[i].checked){
    a[i].value = '1';
    is_a = true;
    }else{
    a[i].value = '0';
    }
    }

    for(var j = 0; j < b.length; j++){
    if(b[j].checked){
    b[j].value = '1';
    is_b = true;
    }else{
    b[j].value = '0';
    }
    }

    if(is_a && is_b){
    for(var k = 0; k < len; k++){
    if(cb[k].type == 'checkbox'){
    str += cb[k].value;
    }
    }
    alert('结果为：' + str);
    }else{
    alert('每组至少选择一个')
    }
    };</script>
    </HTML>
      

  2.   

    <!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=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function checkbx() {
    var FLAG_A = FLAG_B = false;  //表示是否通过验证，默认为通过验证
    var msg = []; //保存错误信息

    var A = document.getElementsByName('A');
    for( var i = 0; i < A.length; i ++) {
    if (A[i].checked) {
    FLAG_A = true;
    break;
    }
    }
    var B = document.getElementsByName('B');
    for( var i = 0; i < B.length; i ++) {
    if (B[i].checked) {
    FLAG_B = true;
    }
    }

    if (!FLAG_A) msg.push('A组至少选一个');
    if (!FLAG_B) msg.push('B组至少选一个');

    if (FLAG_A && FLAG_B) {
    var inputs = document.getElementsByName('sub')[0].getElementsByTagName('input');
    var result = '';
    for( var i = 0; i < inputs.length; i ++) {
    if (inputs[i].type.toLowerCase() == 'checkbox') inputs[i].checked ? result += '1' : result += '0'; //组合checkbox数据，选择为1，否则为0
    }
    alert(result);
    return true;
    }
    else {
    alert(msg);
    return false;
    }
    }
    </script>
    </head><body>
    <form name="sub">
        1:<input type="checkbox" name="A" /><br/>
        2:<input type="checkbox" name="A" /><br/>
        1:<input type="checkbox" name="B" /><br/>
        2:<input type="checkbox" name="B" /><br/>
        3:<input type="checkbox" name="B" /><br/>
        4:<input type="checkbox" name="B" /><br/>
        5:<input type="checkbox" name="B" /><br/>
        <input type="button" value="submit" onclick="checkbx();"/>
    </form>
    </body>
    </html>
      

  3.   

    <!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=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function checkbx() {
    var result = '';
    var obj = document.getElementsByTagName('form')[0].getElementsByTagName('input');
    for ( var i = 0; i < obj.length; i ++) if (obj[i].type.toLowerCase() == 'checkbox') obj[i].checked ? result += '1' : result += '0';
    if (/^([0]{7})|([0]{2}[01]{5})|([01]{2}[0]{5})$/.test(result)) {
    alert('A、B组至少各选一个');
    return false;
    }
    else {
    alert(result);
    return true;
    }
    }
    </script>
    </head><body>
    <form name="sub">
        1:<input type="checkbox" name="A" /><br/>
        2:<input type="checkbox" name="A" /><br/>
        1:<input type="checkbox" name="B" /><br/>
        2:<input type="checkbox" name="B" /><br/>
        3:<input type="checkbox" name="B" /><br/>
        4:<input type="checkbox" name="B" /><br/>
        5:<input type="checkbox" name="B" /><br/>
        <input type="button" value="submit" onclick="checkbx();"/>
    </form>
    </body>
    </html>
      

  4.   

    灰常感谢~~('form')为什么用引号加括号？还是说这个=forms[0]?本人超级小白~~
      

  5.   

    HTML DOM 访问节点
    http://www.w3school.com.cn/htmldom/dom_nodes_access.asp