【JavaScript】判斷每個項目RadioButton為必填
Javascript︰
<script LANGUAGE="JavaScript">
function check_radio(input1){ // input1 為form name變數
var radio_items = []; //宣告空陣列-存放不同radio name
var temp;
//找出all HTML元件並符合type=radio,用意取出radio name
for(var i=0;i<document.forms[input1].elements.length-2;i++)
{
var e=document.forms[input1].elements[i];
if(e.type=='radio') //判斷型態為radio
{
if (temp !=e.name) //比對上一筆radio name與目前這一筆radio name是否相同
{
radio_items.push(e.name); //資料radio name存入陣列
temp=e.name;
}
}
}
var radio_name; //radio name
var obj, flag; // flag 判斷是否有被選取
// radio_items.length-陣列長度
for (var i=0;i<radio_items.length;i++)
{
flag = true;
radio_name=radio_items[i];
obj=document.forms[input1].elements[radio_name];
j=radio_name.substr(11); //取radio_name(radiobutton)後面編號
var arrayStr=j.split("_"); //抓id ex:1_1, 1_2 ...etc
//判斷每一題內的選項是否有被選取
for (var y = 0, x; x = obj[y]; ++y) {
if (x.checked) //選取
{
flag = false;
}
}
if (flag) //未選取
{
alert("選項 " + arrayStr[1] +" 未選擇");
obj[0].focus(); //將焦點停留在最前面RadioButton,But IE8以上無效果
return false;
}
}
}
</script>
部分HTML（參考）︰
<form id="form1" name="form1" method="post" >
… 省略 …
<table class="table_1" width="100%">
… 省略 …
<tr>
<td align="center">1</td>
<td>職務：</td>
<td>
<input name="radiobutton1_1" id="radiobutton1_1" type="radio" value="1" />主管
<input name="radiobutton1_1" id="radiobutton1_1" type="radio" value="2" />非主管
</td>
</tr>
<tr>
<td align="center">2</td>
<td>服務年資：</td>
<td>
<input name="radiobutton1_2" id="radiobutton1_2" type="radio" value="1" />未滿1年
<input name="radiobutton1_2" id="radiobutton1_2" type="radio" value="2" />1年～未滿5年
<input name="radiobutton1_2" id="radiobutton1_2" type="radio" value="3" />5年～未滿10年
<input name="radiobutton1_2" id="radiobutton1_2" type="radio" value="4" />10年～未滿20年
<input name="radiobutton1_2" id="radiobutton1_2" type="radio" value="5" />20年以上
</td>
</tr>
… 省略 …
<tr>
<td align="center">7</td>
<td >對本室電話禮貌、應對態度覺得如何？</td>
<td >
<input name="radiobutton1_7" id="radiobutton1_7" type="radio" value="1" />非常滿意
<input name="radiobutton1_7" id="radiobutton1_7" type="radio" value="2" />滿意
<input name="radiobutton1_7" id="radiobutton1_7" type="radio" value="3" />普通
<input name="radiobutton1_7" id="radiobutton1_7" type="radio" value="4" />不滿意
<input name="radiobutton1_7" id="radiobutton1_7" type="radio" value="5" />非常不滿意
<div id="sg1_7" style="display:none"><input type="text" name="suggest1_7" id="suggest1_7" size="50" maxlength="50"></div>
</td>
</tr>
… 省略 …
<tr>
<td align="center">19</td>
<td >對本室整體服務品質是否滿意？</td>
<td >
<input name="radiobutton1_19" id="radiobutton1_19" type="radio" value="1" />非常滿意
<input name="radiobutton1_19" id="radiobutton1_19" type="radio" value="2" />很滿意
<input name="radiobutton1_19" id="radiobutton1_19" type="radio" value="3" />滿意
<input name="radiobutton1_19" id="radiobutton1_19" type="radio" value="4" />普通
<input name="radiobutton1_19" id="radiobutton1_19" type="radio" value="5" />不滿意
<div id="sg1_19" style="display:none"><input type="text" name="suggest1_19" id="suggest1_19" size="50" maxlength="50"></div>
</td>
</tr>
</table>
<p align="center">
<input name="Submit1" type="button" value="送出" onClick="check_radio('form1')">
</p>
</form>
執行畫面(初始)︰
執行畫面(送出)︰
留言
張貼留言