Jquery控制select和checkbox

下面用範例來說明

JS部分

 

function get_checkbox()
{

    $(".c1").each(function(){

       // 判斷是否被勾選
       if($(this).attr('checked'))
       {
          // 取的已勾選的checkbox值
          alert($(this).attr("value"));
       }

    })
}

function BC_checked()
{

    $(".c1").each(function(){

       if($(this).attr('value') == "B" || $(this).attr('value') == "C")
       {
           // 指定勾選
           $(this).attr("checked",true);
       }

    })
}

function add_option()
{
     // 增加選項
     $(new Option("D" , "4")).appendTo('#S1');
}

function get_selected()
{
    // 取的選中項
    alert($('#S1').val());

}

function clear_option()
{
    //清空下拉框
    $('#S1').empty();

}

function B_selected()
{
     $("#S1").attr("value",'2');

}


HTML部分

<input type="checkbox" name="c1[]" class="c1" value="A">A
&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="c1[]" class="c1" value="B">B
&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="c1[]" class="c1" value="C">C
&nbsp;&nbsp;&nbsp;
<input type="button" name="b1" value="取得勾選" onclick="get_checkbox();">
<input type="button" name="b1" value="勾選BC" onclick="BC_checked();">
<hr>
<br>

<select name="S1" id="S1">
   <option value="1">A</option>
   <option value="2">B</option>
   <option value="3">C</option>
</select>
&nbsp;&nbsp;&nbsp;
<input type="button" name="b1" value="增加選項D" onclick="add_option();">
<input type="button" name="b1" value="取得選中項" onclick="get_selected();">
<input type="button" name="b1" value="清空選項" onclick="clear_option();">
<input type="button" name="b1" value="指定B為選中項" onclick="B_selected();">

 

線上demo  http://i-rich.tw/border_blog/sample3/test.php