jQuery checkbox 간단하고 실용적인 기술 (1)

오늘 학교 시스템을 변경해야 하기 때문에 원래의 교사 내용 표시를 문자를 보낼 수 있는 체크박스로 바꿔야 합니다. 전 시스템은 순수한 자바스크립트를 사용하는 것이 익숙하지 않기 때문에 여기에 jQuery를 사용하여 간단한 실례를 참고했습니다. 제 친구 길조와 함께 완성했습니다. (본인 jQuery 수준이 제한되어 있으니 양해해 주십시오) 간단한 코드는 다음과 같습니다.

<!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>   

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   

  <title>jQuery</title>   

 <style type="text/css">   

 ul li{list-style:none;}    

ul li.menu{position:relative;width:120px;}    

ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;}    

 ul li.menu ul li{padding:5px 0;border-bottom:1px dotted #ddd;}</style>   

 <script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>   

<script language="javascript" type="text/javascript">   

$(document).ready(function(){    

  $(".menu").hover(    

         function(){    

             $(".content").fadeIn(800);         

           // $(".content").slideDown(800);        

         },function(){    

             $(".content").fadeOut(1000)        

         //    $(".content").slideUp(1000)     

         });    

 })    

 </script>

<script type="text/javascript"><!-- 

var num =  0;

var f_str="";

$(function() { 



$("input[name='checkbox_name[]']").click(

    function(){

        num =$("input[name='checkbox_name[]']:checked").length;

        f_str=""; $("input[name='checkbox_name[]']").each( function(){ if($(this).attr("checked")==true){ f_str += $(this).attr("value")+","; } }); $("#input").html("      "+num+"   :"+f_str); } ); $("#checkedAll").click(function() { if ($(this).attr("checked") == true) { $("input[name='checkbox_name[]']").each(function() { $(this).attr("checked", true); f_str += $(this).attr("value")+","; num =$("input[name='checkbox_name[]']:checked").length; }); $("#input").html("      "+num+"   :"+f_str); } else { $("input[name='checkbox_name[]']").each(function() { $(this).attr("checked", false); }); f_str=""; num =$("input[name='checkbox_name[]']:checked").length; $("#input").html("      "+num+"   "+f_str); } }); $("#input").html("      "+num+"   "); }); // -->  </script> </head> <body> <div> <ul> <li class="menu"> <input type="checkbox" value="hehe" name="checkedAll" id="checkedAll">     <ul class="content"> <li><input name="checkbox_name[]" id="checkbox_name" type="checkbox" value="  1">  1 </li> <li><input name="checkbox_name[]" id="checkbox_name" type="checkbox" value="  2">  2 </li> <li><input name="checkbox_name[]" id="checkbox_name" type="checkbox" value="  3">  3 </li> <li><input name="checkbox_name[]" id="checkbox_name" type="checkbox" value="  4">  4 </li> <li><input name="checkbox_name[]" id="checkbox_name" type="checkbox" value="  5">  5 </li> </ul> </li> </ul> </div> <div id="input"> </div> </body> </html>

복사만 하면 바로 사용할 수 있습니다. 기능은 다음과 같습니다. 선택할 수 있습니다. 선택할 수 있으면 선택한 값을 얻을 수 있고, 모두 선택할 수 있으며, 모두 취소할 수 있습니다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

useRef() Hook을 사용하여 React Js에서 버튼이 있는 모든 확인란을 어떻게 선택/선택 취소합니까?

useRef() Hook을 사용하여 React Js에서 버튼이 있는 모든 확인란을 어떻게 선택/선택 취소합니까? 이 게시물에서는 모든 확인란을 선택/선택 취소하는 방법에 대해 알아봅니다. useRef() 반응 후크 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

jQuery checkbox 간단하고 실용적인 기술 (1)

좋은 웹페이지 즐겨찾기