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

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="获得选中的所有值"> 

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); 
  }) 
}); 

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?