2009年2月24日

操控 RADIO 與 CHECKBOX

此練習使用 javascript 讀取 RADIO 與 CHECKBOX 的狀態。此練習用到以下元素與特徵:

  1. FORM:宣告輸入表格。
  2. RADIO:宣告一組單選鈕。
  3. CHECKBOX:宣告一組複選鈕。
  4. document.forms:用來讀取或設定輸入表格的物件清單。
  5. onclick:用滑鼠左鍵點擊時,會啟動程序。。
  6. checked:RADID 與 CHECKBOX 元素物件的特徵,存放 true 表示此項被點選了;否則存放 false。
  7. value:RADID 與 CHECKBOX 元素物件的特徵,存放此項的值。
  • 程式用法:

    <form id='fm1' onclick='hitted(this, "country")'>
    單選的 RADIO:
    <div>
    <input name='country' type=radio
      value='ROC'checked>中華民國<br />
    <input name='country' type=radio
      value='USA'>美國<br />
    <input name='country' type=radio
      value='NZL'>紐西蘭<br />
    <input name='country' type=radio
      value='FRC'>法國
    </div>
    </form>

    <form id='fm2' onclick='favors(this, "stars")'>
    複選的 CHECKBOX:
    <input name='stars' type=checkbox
      value='Jolin'checked>蔡依林
    <input name='stars' type=checkbox
      value='沛慈'>曾沛慈
    <input name='stars' type=checkbox
      value='敬騰'>蕭敬騰
    <input name='stars' type=checkbox
      value='宗緯'>楊宗緯
    </form>
    <p>
    <script type='text/javascript'>
    function hitted( o, name )
    {
      for(var i=0; i < o[name].length; i++)
        if( o[name][i].checked ) break;
      alert( o[name][i].value );
    }
    function favors( o, name)
    {
      var s='';
      for(var i=0; i < o[name].length; i++)
        if( o[name][i].checked ) s+=' / '+ o[name][i].value;
      alert( s );
    }
    for(var i=0; i < document.forms['fm1'].country.length; i++)
      document.write( document.forms['fm1'].country[i].value
        +' / '+ document.forms['fm1'].country[i].checked +'<br />');

    for(var i=0; i < document.forms['fm2'].stars.length; i++)
      document.write( document.forms['fm2'].stars[i].value
        +' / '+ document.forms['fm2'].stars[i].checked +'<br />');

    </script>

  • 執行結果:

    單選的 RADIO:
    中華民國
    美國
    紐西蘭
    法國
    複選的 CHECKBOX: 蔡依林 曾沛慈 蕭敬騰 楊宗緯

    ROC / true
    USA / false
    NZL / false
    FRC / false
    Jolin / true
    沛慈 / false
    敬騰 / false
    宗緯 / false


©2008-2009 by ant2legs, All Rights Reserved. ant2legs 擁有其製作的文章,圖片與程式的著作權,所有權利保留。