Contoh demonstrasi penggunaan kotak semak dalam kemahiran javascript

Rumah

hujung hadapan web

tutorial js

Contoh demonstrasi penggunaan kotak semak dalam kemahiran javascript_javascript

May 16, 2016 pm 03:31 PM

javascript

Contoh dalam artikel ini menerangkan kod menu regangan dan pengecutan yang dilaksanakan dalam JavaScript. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Tangkapan skrin kesan berjalan adalah seperti berikut:

(1) Pilih semua

(2) pemilihan bahagian

(3) Pilihan songsang (pilih tiada)

Kod khusus adalah seperti berikut:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; 
&lt;html&gt; 
&lt;head&gt; 
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; 
&lt;title&gt;Table中的CheckBox&lt;/title&gt; 
&lt;script type="text/javascript" src="script/jquery-1.10.1.js"&gt;&lt;/script&gt; 
&lt;style type="text/css"&gt; 
  body 
  { 
   width:100%; 
   height:100%; 
   font-size:12px; 
  } 
  table 
  { 
   width:80%; 
   height:100%; 
  } 
  .tr_odd 
  { 
   background: #EBF2FE; 
  } 
  .tr_even 
  { 
   background: #B4CDE6; 
  } 
  .tab_body 
  { 
   text-align: center; 
  } 
&lt;/style&gt; 
&lt;script type="text/javascript"&gt; 
  $(function(){ 
    $("tr:odd").addClass("tr_odd");//奇数行背景色 
    $("tr:even").addClass("tr_even");//偶数行背景色 
     
    $("#ckb_head").click(function(){ 
      if($(this).prop("checked")){//全选 
        $("input[name='ckb']").attr("checked","true"); 
      }else{//全不选 
        $("input[name='ckb']").removeAttr("checked"); 
      } 
    }); 
  }); 
   
  //部分选 
  function ckbSome(){ 
    var flag = true; 
    var selectedCkb = document.getElementsByName("ckb"); 
    for(var i=0;i&lt;selectedCkb.length;i++){ 
      if(selectedCkb[i].checked == false){ 
        flag = false; 
      } 
      if(flag){ 
        document.getElementsByName("check_box")[0].checked=true; 
      }else{ 
        document.getElementsByName("check_box")[0].checked=false; 
      } 
    } 
  } 
&lt;/script&gt; 
&lt;/head&gt; 
&lt;body&gt; 
  &lt;table&gt; 
   &lt;tr style="background: #CCCCCC;text-align: center;"&gt; 
    &lt;th&gt;&lt;input type="checkbox" id="ckb_head" name="check_box"/&gt;&lt;/th&gt; 
    &lt;th&gt;学号&lt;/th&gt; 
    &lt;th&gt;姓名&lt;/th&gt; 
    &lt;th&gt;年龄&lt;/th&gt; 
    &lt;th&gt;性别&lt;/th&gt; 
   &lt;/tr&gt; 
   &lt;tr class="tab_body"&gt; 
    &lt;td&gt;&lt;input type="checkbox" name="ckb" onclick="ckbSome()"/&gt;&lt;/td&gt; 
    &lt;td&gt;2013060101&lt;/td&gt; 
    &lt;td&gt;张华&lt;/td&gt; 
    &lt;td&gt;23&lt;/td&gt; 
    &lt;td&gt;男&lt;/td&gt; 
   &lt;/tr&gt; 
   &lt;tr class="tab_body"&gt; 
    &lt;td&gt;&lt;input type="checkbox" name="ckb" onclick="ckbSome()"/&gt;&lt;/td&gt; 
    &lt;td&gt;2013060102&lt;/td&gt; 
    &lt;td&gt;赵雪&lt;/td&gt; 
    &lt;td&gt;24&lt;/td&gt; 
    &lt;td&gt;女&lt;/td&gt; 
   &lt;/tr&gt; 
   &lt;tr class="tab_body"&gt; 
    &lt;td&gt;&lt;input type="checkbox" name="ckb" onclick="ckbSome()"/&gt;&lt;/td&gt; 
    &lt;td&gt;2013060103&lt;/td&gt; 
    &lt;td&gt;孙旭&lt;/td&gt; 
    &lt;td&gt;21&lt;/td&gt; 
    &lt;td&gt;男&lt;/td&gt; 
   &lt;/tr&gt; 
   &lt;tr class="tab_body"&gt; 
    &lt;td&gt;&lt;input type="checkbox" name="ckb" onclick="ckbSome()"/&gt;&lt;/td&gt; 
    &lt;td&gt;2013060104&lt;/td&gt; 
    &lt;td&gt;李姝&lt;/td&gt; 
    &lt;td&gt;20&lt;/td&gt; 
    &lt;td&gt;女&lt;/td&gt; 
   &lt;/tr&gt; 
   &lt;tr class="tab_body"&gt; 
    &lt;td&gt;&lt;input type="checkbox" name="ckb" onclick="ckbSome()"/&gt;&lt;/td&gt; 
    &lt;td&gt;2013060105&lt;/td&gt; 
    &lt;td&gt;公孙旭&lt;/td&gt; 
    &lt;td&gt;22&lt;/td&gt; 
    &lt;td&gt;男&lt;/td&gt; 
   &lt;/tr&gt; 
   &lt;tr class="tab_body"&gt; 
    &lt;td&gt;&lt;input type="checkbox" name="ckb" onclick="ckbSome()"/&gt;&lt;/td&gt; 
    &lt;td&gt;2013060106&lt;/td&gt; 
    &lt;td&gt;李枝花&lt;/td&gt; 
    &lt;td&gt;24&lt;/td&gt; 
    &lt;td&gt;女&lt;/td&gt; 
   &lt;/tr&gt; 
   &lt;tr class="tab_body"&gt; 
    &lt;td&gt;&lt;input type="checkbox" name="ckb" onclick="ckbSome()"/&gt;&lt;/td&gt; 
    &lt;td&gt;2013060107&lt;/td&gt; 
    &lt;td&gt;魏征&lt;/td&gt; 
    &lt;td&gt;22&lt;/td&gt; 
    &lt;td&gt;男&lt;/td&gt; 
   &lt;/tr&gt; 
   &lt;tr class="tab_body"&gt; 
    &lt;td&gt;&lt;input type="checkbox" name="ckb" onclick="ckbSome()"/&gt;&lt;/td&gt; 
    &lt;td&gt;2013060108&lt;/td&gt; 
    &lt;td&gt;施礼&lt;/td&gt; 
    &lt;td&gt;20&lt;/td&gt; 
    &lt;td&gt;女&lt;/td&gt; 
   &lt;/tr&gt; 
   &lt;tr class="tab_body"&gt; 
    &lt;td&gt;&lt;input type="checkbox" name="ckb" onclick="ckbSome()"/&gt;&lt;/td&gt; 
    &lt;td&gt;2013060109&lt;/td&gt; 
    &lt;td&gt;王志&lt;/td&gt; 
    &lt;td&gt;23&lt;/td&gt; 
    &lt;td&gt;男&lt;/td&gt; 
   &lt;/tr&gt; 
   &lt;tr class="tab_body"&gt; 
    &lt;td&gt;&lt;input type="checkbox" name="ckb" onclick="ckbSome()"/&gt;&lt;/td&gt; 
    &lt;td&gt;2013060104&lt;/td&gt; 
    &lt;td&gt;方小许&lt;/td&gt; 
    &lt;td&gt;20&lt;/td&gt; 
    &lt;td&gt;女&lt;/td&gt; 
   &lt;/tr&gt; 
  &lt;/table&gt; 
&lt;/body&gt; 
&lt;/html&gt;

Salin selepas log masuk

Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan JavaScript.

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn