close

轉自 https://blog.wu-boy.com/2008/12/jquery%E5%88%A4%E6%96%B7-checkbox-%E6%98%AF%E5%90%A6%E9%81%B8%E5%8F%96%EF%BC%8C%E5%AF%A6%E7%8F%BE%E5%85%A8%E9%81%B8%E8%B7%9F%E5%85%A8%E9%83%A8%E5%8F%96%E6%B6%88/

--

在 jQuery 底下要如何實現這個功能，其實還蠻簡單的，首先看 html 部份

 

01
02
03
04
05
06
<input name="user_active_col[]" type="checkbox" value="1"> 1
<input name="user_active_col[]" type="checkbox" value="2"> 2
<input name="user_active_col[]" type="checkbox" value="3"> 3
<input name="user_active_col[]" type="checkbox" value="4"> 4
<input name="user_active_col[]" type="checkbox" value="5"> 5
<input name="clickAll" id="clickAll" type="checkbox"> 全選

 

jQuery 部份如下：

 

01
02
03
04
05
06
07
08
09
10
11
$("#clickAll").click(function() {
   if($("#clickAll").prop("checked")) {
     $("input[name='user_active_col[]']").each(function() {
         $(this).prop("checked", true);
     });
   } else {
     $("input[name='user_active_col[]']").each(function() {
         $(this).prop("checked", false);
     });          
   }
});

 

可以不用 loop 方式，直接用一行解取代上面程式碼

 

01
$("input[name='user_active_col[]']").prop("checked", true);

 

--

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 dizzy03 的頭像
    dizzy03

    碎碎念

    dizzy03 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄