Jam's story

[JS] 체크 모두풀기, 해제하기 본문

WEB/JavaScript

[JS] 체크 모두풀기, 해제하기

애플쩀 2022. 6. 2. 06:35 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
    <style>  
        table, th, td {
          border: 1px solid gray;
        }
        table{
          width:50%;
          margin:0 auto;
        }  
      </style>
</head>
<body>
<h3>모두 체크와 체크풀기 예제 </h3>
    <table>
        
        <thead>
         <tr>
            <td><input type="checkbox" class="all">모두 선택</td>
            <td>Name</td>
            <td>Loc</td>
         </tr>
        </thead>   
        <tbody>
         <tr>
            <td><input type="checkbox" id="ck1"></td>
            <td>Animi.</td>
            <td>Hic.</td>
         </tr>
         <tr>
            <td><input type="checkbox" id="ck2"></td>
            <td>Esse.</td>
            <td>Fuga.</td>
         </tr>
         <tr>
            <td><input type="checkbox" id="ck3"></td>
            <td>Fuga.</td>
            <td>Ducimus?</td>
         </tr>
         <tr>
            <td><input type="checkbox" id="ck4"></td>
            <td>Beatae.</td>
            <td>Optio.</td>
         </tr>
        </tbody>   
        <tfoot>
            <tr>
                <td colspan="3" align="center">
                    <button>확인</button>
                </td>
            </tr>
        </tfoot>
      </table>
<p id="demo"> 체크된 체크박스의 id속성값을 출력 </p>
      <script>
          //모두체크
          $(":checkbox.all").click(function(){
              $(":checkbox:not(.all)").prop("checked",true);
          });

          //체크풀기 
          $(":checkbox:not(.all)").click(function(){
              if( $(":checkbox:not(.all):checked").length==4){
                $(":checkbox").eq(0).prop("checked",true);
              }else{
                $(":checkbox").eq(0).prop("checked",false);
              }
          });

          // 삼항연산자 
          $(":checkbox:not(.all)").click(function(){
              let len= $(":checkbox:not(.all):checked").length;
              $(":checkbox.all").prop("checked", len==4? true:false);
          });

          //id 출력하기 
            $("tfoot button").click(function(){
              //  alert("xxx");
              $(":checkbox:not(.all):checked").each(function(i,element){
                  console.log(element.id);
                  // p태그에 id출력
                $("p#demo").html(function(index,htmlString){
                    return htmlString+"<li>"+element.id+"</li>";
                });
              });
              
            });
            //name 출력하기 
            $("tfoot button").click(function(){
              //  alert("xxx");
              $(":checkbox:not(.all):checked").each(function(i,element){
                 var name=  element.parentElement.nextElementSibling.innerHTML;
                //var name=  element.parentElement.nextElementSibling.childNodes[0].innerText;
                console.log(name);
                });
              
            });


         /*    li태그를 만들고 그 안에 id 값을 주겟다 .
            "<li>"+element.id+"</li>";== $("<li></li>").text(element.id);
             */

      </script>
</body>
</html>

 

 

 

var name=  element.parentElement.nextElementSibling.innerHTML;

element 는 체크박스를 의미하고, 그것의 부모요소의 형제요소의 innerHTML을 뜻한다. 

 

저작자표시 (새창열림)

'WEB > JavaScript' 카테고리의 다른 글

[JS] 문자열 다루기  (0) 2022.06.02
[ JS] days03  (0) 2022.06.02
[JS] 엔터쳐서 숫자를 이어받고, 합을 출력 -onkeydown 사용  (0) 2022.05.30
[JS] input-text 입력받으면 넘어가고, p에 출력  (0) 2022.05.30
[JS] 자바스크립트의 기본적인 문법  (0) 2022.05.30
'WEB/JavaScript' Related Articles more
Comments