Rumah > hujung hadapan web > tutorial js > Laksanakan fungsi seperti memilih semua kotak semak, menyongsangkan pilihan, dan menyahpilih tiada berdasarkan jquery_jquery

Laksanakan fungsi seperti memilih semua kotak semak, menyongsangkan pilihan, dan menyahpilih tiada berdasarkan jquery_jquery

WBOY
Lepaskan: 2016-05-16 15:36:26
asal
1254 orang telah melayarinya

jquery melaksanakan fungsi seperti memilih semua, menyongsangkan pemilihan dan menyahpilih semua Berikut ialah contoh. Andaikan halaman tersebut mempunyai set kotak semak berikut dan beberapa butang yang berkaitan (pilih semua, terbalikkan pilihan, nyahpilih semua, dll.):

<input type="checkbox" name="fruit" value="apple" />苹果 
<input type="checkbox" name="fruit" value="orange" />橘子 
<input type="checkbox" name="fruit" value="banana" />香蕉 
<input type="checkbox" name="fruit" value="grape" />葡萄 
 
<input type="button" id="btn1" value="全选"> 
<input type="button" id="btn2" value="全不选"> 
<input type="button" id="btn3" value="反选"> 
<input type="button" id="btn4" value="选中所有奇数"> 
<input type="button" id="btn5" value="获得选中的所有值"> 
Salin selepas log masuk

Kod lengkap untuk melaksanakan fungsi yang berkaitan masing-masing adalah seperti berikut:

$(function(){ 
  $('#btn1').click(function(){//全选 
    $("[name='fruit']").attr('checked','true'); 
  }); 
  $('#btn2').click(function(){//全不选 
    $("[name='fruit']").removeAttr('checked'); 
  }); 
  $('#btn3').click(function(){//反选 
    $("[name='fruit']").each(function(){ 
      if($(this).attr('checked')){ 
        $(this).removeAttr('checked'); 
      }else{ 
        $(this).attr('checked','true'); 
      } 
    }) 
  }); 
  $("#btn4").click(function(){//选中所有奇数 
    $("[name='fruit']:even").attr('checked','true'); 
  }) 
  $("#btn5").click(function(){//获取所有选中的选项的值 
    var checkVal=''; 
    $("[name='fruit'][checked]").each(function(){ 
      checkVal+=$(this).val()+','; 
    }) 
    alert(checkVal); 
  }) 
}); 
Salin selepas log masuk

Perhatikan bahawa anda mesti mengimport pakej jquery sebelum menggunakan jquery!

Di atas adalah kod yang telah dikompilasi oleh editor Adakah ia sangat mudah untuk digunakan?

sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan