Y星人の工作語錄

別理我, 我只是一個愛發勞騷的Y星人

6月
25

How multi radiobox groups check?

Posted by YuanYuan

I need multi radiobox groups check to do something, but I can’t find good soulution with jQuery.
So, I try to do this.

  1. <form id="form82" name="form82">
  2.  <div id="pagiTable">
  3.     <table cellspacing="0" id="ansTable">
  4.     <tbody>
  5.  
  6.         <tr>
  7.             <th>1</label></th>
  8.             <td class="col201"><input name="Field1" id="Field1a" type="radio" tabindex="1" value="A" /></td>
  9.             <td><label for="Field1a">我很努力工作</label></td>
  10.             <td class="col201"><input name="Field1" id="Field1b" type="radio" tabindex="2" value="J" /></td>
  11.             <td><label for="Field1b">我不情緒化</label></td>
  12.         </tr>
  13.         <tr class="alt">
  14.             <th><label for="Field2">2</label></th>
  15.             <td class="col201"><input name="Field2" id="Field2a" type="radio" tabindex="3" value="B" /></td>
  16.             <td><label for="Field2a">我是一個好的領導者</label></td>
  17.             <td class="col201"><input name="Field2" id="Field2b" type="radio" tabindex="4" value="I" /></td>
  18.             <td><label for="Field2b">我會把我的工作處理的很有條理</label></td>
  19.         </tr>
  20.         <tr>
  21.             <th><label for="Field1">3</label></th>
  22.             <td class="col201"><input name="Field3" id="Field3a" type="radio" tabindex="5" value="C" /></td>
  23.             <td><label for="Field3a">我常冒險</label></td>
  24.             <td class="col201"><input name="Field3" id="Field3b" type="radio" tabindex="6" value="H" /></td>
  25.             <td><label for="Field3b">處理事務時，我對每個細節都很注意</label></td>
  26.         </tr>
  27.     </tbody>
  28.     </table>
  29.  
  30.         <div>
  31.             <input id="intRecordGrid" type="hidden" value="000ia425k6uiumsv" time="15" name="intRecordGrid" />
  32.             <input id="saveForm" name="saveForm" class="btTxt submit" type="button" value="完成.送出" onclick="validate_form()" />
  33.         </div>
  34. </div>
  35. </form>

I try to

Older javascript way.

  1. <script language=javascript type="text/javascript">
  2.     function rdoChk(o) {
  3.         var e = eval(o);
  4.  
  5.         for (i = 0; i < e.length; i++) {
  6.             if (e[i].checked) {
  7.                 return i;
  8.                 alert(e[i].value)
  9.             }
  10.         }
  11.         return -1;
  12.  
  13.     }
  14.  
  15.     function check() {
  16.  
  17.         var p = '';
  18.         var pp = '';
  19.         var c = 0;
  20.  
  21.         for (var i = 1; i < 4; i++) {
  22.  
  23.             var f = 'document.form82.Field' + i;
  24.             var g = rdoChk(f);
  25.  
  26.             if (g == -1) {
  27.                 p += i + '/';
  28.                 c += 1;
  29.             }
  30.             pp += g + '|'
  31.  
  32.         }
  33.  
  34.         if (c > 0) {
  35.             alert('第 ' + p + ' 題沒有選擇答案喔!');
  36.         }
  37.         else {
  38.  
  39.             alert('你答完了, 辛苦了!!!');
  40.  
  41.         }
  42.  
  43.     }
  44. </script>

jQuery way.

  1. function validate_form (){
  2.  
  3. // check radio type & length
  4. var count = 0;
  5. var names = [];
  6.   $('input[name^=Field]').each(function(i, v) {
  7.       if ($.inArray(v.name, names) == -1) {
  8.               names.push(v.name);
  9.               count += 1;
  10.             }
  11.       });
  12.  
  13. var r_len =  count;
  14.  
  15. var which = '';
  16. var what  = '';
  17. var valid = true;
  18.  
  19.     for (var i=0; i < r_len; i++){
  20.  
  21.         if ($('input[name='+names[i]+']:checked').length == 0 ){
  22.             which += (i+1) + ' '
  23.             valid = false;
  24.         }
  25.         else
  26.         {
  27.             var val = $('input[name=' + names[i]+ ']:checked').val();
  28.             what += (i+1) +'-' + val + ', ' ;
  29.         }
  30.     }
  31.     if (!valid){
  32.         alert('第 ' + which + ' 題沒有選擇答案喔!');
  33.         }
  34.         else {
  35.             alert(what + "\r恭喜你! 辛苦了.");
  36.         }
  37. }
  38. </script>

maybe some good solution…

« javascript’s super Chart - Highcharts and IE6’s problem solution.
a Quiz - click td rows, change th(no)+td(answer) background and radio checked. »
  1. Dabinn Said,

    It seems the older js way is not that bad. Data validation in HTML still very annoying, even with jQuery. :(

    回應一下

Add A Comment