Rumah >hujung hadapan web >tutorial js >jquery melaksanakan pemilihan penuh mudah dan pemilihan songsang functions_jquery

jquery melaksanakan pemilihan penuh mudah dan pemilihan songsang functions_jquery

WBOYasal: 2016-05-16 15:22:24994semak imbas

Mula-mula mari kita lihat contoh mudah

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery实现CheckBox全选、全不选</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>  <script type="text/javascript">
    $(function() {
      $("#checkAll").click(function() {
        $('input[name="subBox"]').attr("checked",this.checked); 
      });
      var $subBox = $("input[name='subBox']");
      $subBox.click(function(){
        $("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length &#63; true : false);
      });
    });
  </script>
 
</head>
<body>
  <div>
    <input id="checkAll" type="checkbox" />全选
    <input name="subBox" type="checkbox" />项1
    <input name="subBox" type="checkbox" />项2
    <input name="subBox" type="checkbox" />项3
    <input name="subBox" type="checkbox" />项4
  </div>
</body>
</html>

Biar saya berkongsi dengan anda sekeping kod berdasarkan jQuery untuk melaksanakan fungsi memilih semua, menyongsangkan dan menyahpilih senarai kotak semak Ia sesuai untuk senario di mana operasi kelompok diperlukan selepas berbilang pilihan pada halaman web (seperti pemadaman kelompok, dsb.). Artikel ini menggabungkan contoh dengan kod ringkas dan pada asasnya merangkumi semua aspek operasi pemilihan pilihan Saya harap ia dapat membantu peminat pembangunan bahagian hadapan yang memerlukan.

Memperkenalkan perpustakaan jquery

<script src="http://ajax.useso.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Bina HTML

Secara amnya, senarai yang dibaca daripada pangkalan data perlu dipilih secara berkelompok untuk pemadaman dan pengeditan Mari kita buat simulasi di bawah untuk mengetahui sama ada hendak memilih semua kotak pilihan atau tidak

<ul id="list">  
  <li><label><input type="checkbox" value="1"> 1.我是记录来的呢</label></li> 
  <li><label><input type="checkbox" value="2"> 2.哈哈，真的太天真了</label></li> 
  <li><label><input type="checkbox" value="3"> 3.爱上你是我的错吗？</label></li> 
  <li><label><input type="checkbox" value="4"> 4.从开始你就不应用爱上我</label></li> 
  <li><label><input type="checkbox" value="5"> 5.喜欢一个人好难</label></li> 
  <li><label><input type="checkbox" value="6"> 6.你在那里呢</label></li> 
</ul> 
<input type="checkbox" id="all"> 
<input type="button" value="全选" class="btn" id="selectAll">  
<input type="button" value="全不选" class="btn" id="unSelect">  
<input type="button" value="反选" class="btn" id="reverse">  
<input type="button" value="获得选中的所有值" class="btn" id="getValue">

kod jQuery

1 Pilih semua atau tiada. Apabila kotak semak #semua di sebelah butang Pilih Semua #pilihSemua ditandakan, semua pilihan dalam senarai dipilih Jika tidak, apabila dinyahtanda, semua pilihan dalam senarai tidak ditanda.

$("#all").click(function(){  
  if(this.checked){  
    $("#list :checkbox").attr("checked", true);  
  }else{  
    $("#list :checkbox").attr("checked", false); 
  }  
});

2. Pilih semua. Apabila anda mengklik butang Pilih Semua #pilihSemua atau tandakan kotak semak #semua di sebelah butang Pilih Semua, semua pilihan dalam senarai akan dipilih, termasuk kotak pilihan di sebelah Pilih Semua.

$("#selectAll").click(function () { 
  $("#list :checkbox,#all").attr("checked", true);  
});

3. Pilih tiada. Apabila butang #unSelect diklik, semua pilihan dalam senarai tidak dipilih, termasuk #semua.

$("#unSelect").click(function () {  
  $("#list :checkbox,#all").attr("checked", false);  
});

4. Apabila anda mengklik butang #terbalik, semua pilihan yang dipilih dalam senarai menjadi tidak dipilih, dan semua pilihan yang tidak dipilih Sudah tentu, anda juga harus memberi perhatian kepada status #semua.

$("#reverse").click(function () { 
  $("#list :checkbox").each(function () {  
    $(this).attr("checked", !$(this).attr("checked"));  
  }); 
  allchk(); 
});

Kod merentasi senarai pilihan, kemudian menukar atribut yang ditandakan, dan akhirnya memanggil fungsi allchk(), yang akan diperkenalkan kemudian.

5. Dapatkan semua nilai yang dipilih. Jika kita ingin berinteraksi dengan program latar belakang, kita mesti mendapatkan nilai item yang dipilih dalam senarai Kita melintasi tatasusunan, menyimpan nilai item yang dipilih dalam tatasusunan, dan akhirnya membentuk rentetan yang dipisahkan dengan koma (,) . Pembangun boleh mendapatkan Operasi yang sepadan dilakukan pada rentetan ini.

$("#getValue").click(function(){ 
  var valArr = new Array; 
  $("#list :checkbox[checked]").each(function(i){ 
    valArr[i] = $(this).val(); 
  }); 
  var vals = valArr.join(',');//转换为逗号隔开的字符串 
  alert(vals); 
});

Untuk menambah baik fungsi pilihan yang dipilih, apabila kita mengklik pilihan dalam senarai, jika item yang ditandakan memenuhi semua syarat yang dipilih, #semua juga akan dipilih dengan cara yang sama, jika semua item yang dipilih dipilih terlebih dahulu, Apabila pilihan dipilih, dan apabila pilihan dinyahtanda, #all juga akan menjadi tidak ditandakan dengan sewajarnya.

//设置全选复选框 
$("#list :checkbox").click(function(){ 
  allchk(); 
});

Fungsi allchk() digunakan untuk mengesan sama ada kotak semua pilih #semua harus dipilih atau dinyahpilih Sila lihat kod.

function allchk(){ 
  var chknum = $("#list :checkbox").size();//选项总个数 
  var chk = 0; 
  $("#list :checkbox").each(function () {  
    if($(this).attr("checked")==true){ 
      chk++; 
    } 
  }); 
  if(chknum==chk){//全选 
    $("#all").attr("checked",true); 
  }else{//不全选 
    $("#all").attr("checked",false); 
  } 
}

Ringkasan

jQuery mengendalikan status kotak pilihan yang ditanda dan tidak ditanda Gunakan attr() untuk menetapkan nilai atribut "ditandakan" Benar tidak ditanda, salah tidak ditandakan keseluruhan proses Pilih keadaan kotak semak yang ditanda dan dapatkan nilai pilihan yang dipilih. Di bawah saya telah menyusun semua kod jQuery bersama-sama untuk rujukan anda.

$(function () { 
  //全选或全不选 
  $("#all").click(function(){  
    if(this.checked){  
      $("#list :checkbox").attr("checked", true);  
    }else{  
      $("#list :checkbox").attr("checked", false); 
    }  
   }); 
  //全选  
  $("#selectAll").click(function () { 
     $("#list :checkbox,#all").attr("checked", true);  
  });  
  //全不选 
  $("#unSelect").click(function () {  
     $("#list :checkbox,#all").attr("checked", false);  
  });  
  //反选 
  $("#reverse").click(function () { 
     $("#list :checkbox").each(function () {  
       $(this).attr("checked", !$(this).attr("checked"));  
     }); 
     allchk(); 
  }); 
   
  //设置全选复选框 
  $("#list :checkbox").click(function(){ 
    allchk(); 
  }); 
  
  //获取选中选项的值 
  $("#getValue").click(function(){ 
    var valArr = new Array; 
    $("#list :checkbox[checked]").each(function(i){ 
      valArr[i] = $(this).val(); 
    }); 
    var vals = valArr.join(','); 
     alert(vals); 
  }); 
}); 
function allchk(){ 
  var chknum = $("#list :checkbox").size();//选项总个数 
  var chk = 0; 
  $("#list :checkbox").each(function () {  
    if($(this).attr("checked")==true){ 
      chk++; 
    } 
  }); 
  if(chknum==chk){//全选 
    $("#all").attr("checked",true); 
  }else{//不全选 
    $("#all").attr("checked",false); 
  } 
}

Kenyataan：

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

Artikel sebelumnya：Javascript melaksanakan kemahiran input fail muat naik imej effect_javascriptArtikel seterusnya：Javascript melaksanakan kemahiran input fail muat naik imej effect_javascript

Artikel berkaitan

Lihat lagi