Border的快樂生活記錄

如果想要在一群checkbox中   取得被選擇的元件   並加上一個class

我做了一個範例  但我是採用js 與 jquery混合運用的方式   因為我沒研究jquery怎麼取得checkbox

範例構想：我要選擇一張圖片做為封面  

1. js 部分

function set_index(cnt_id)
   {
       var num=0;
 
       // 計算有多少個checkbox
       num=document.getElementsByName('dm_pic[]').length; 
 
       var checked_id="";  // 被選擇的id
       var checked_num=0;  // 被選擇的個數
 
       for(i=0;i<num;i++)
       {
           if(document.getElementsByName('dm_pic[]')[i].checked)
           {
              checked_id=document.getElementsByName('dm_pic[]')[i].value;
 
              // 取得被選擇的元件
              var obj=document.getElementsByName('dm_pic[]')[i];
              checked_num++;
           }
       }
 
       if(checked_id=="")
       {
           alert('請至少選擇一張圖片');
           return false;
       }
       else if(checked_num > 1)
       {
            alert('只能選擇一張圖片');
            return false;
       }
       else
       {
 
             alert("已設定");
 
             // 在父元素ul加上class  pic1_index
             $(obj).parents("ul").addClass("pic1_index");
 
       }
 
   }

2.css部分

/* 被選擇為封面的樣式 */
.pic1_index{
   border-style:solid;border-color:red;
}

3.HTML部分

<ul>
                   <p><a href="javascript:void(1)">
                   <img src="pic/1.jpg" width="65" alt=""   /></a></p>
                   <b><input name="dm_pic[]" id="input3" type="checkbox" value="1" />  </b>
                </ul>
 
                <ul>
                   <p><a href="javascript:void(1)">
                   <img src="pic/2.jpg" width="65" alt=""   /></a></p>
                   <b><input name="dm_pic[]" id="input3" type="checkbox" value="2" />  </b>
                </ul>
 
                <ul>
                   <p><a href="javascript:void(1)">
                   <img src="pic/3.jpg" width="65" alt=""   /></a></p>
                   <b><input name="dm_pic[]" id="input3" type="checkbox" value="3" />  </b>
                </ul>
 
                <ul>
                   <p><a href="javascript:void(1)">
                   <img src="pic/4.jpg" width="65" alt=""   /></a></p>
                   <b><input name="dm_pic[]" id="input3" type="checkbox" value="4" />  </b>
                </ul>

範例網址  http://i-rich.tw/border_blog/sample1/

維度自動免費架站系統，讓你快速擁有自己的網站
維度架站(新版系統)
維度架站
維度雲商城