데일리로그C:
Published 2023. 2. 10. 15:38
input - checkbox Memo

1. input 만들기

<bash />
전체 선택, 해제 <input type=checkbox id="cboxAll" name="cboxAll" onclick="cAll()"> while문 안에 있음 <input type=checkbox id="cbox" name="cbox">

 

 

2. cAll() 함수 실행

<bash />
<script> function cAll() { if($('#cboxAll').is(':checked')) { // 전체선택 체크 하면 $("input[name=cbox]").prop("checked",true); // 각 체크박스 체크되게 } else { // 체크 해제하면 $("input[name=cbox]").prop("checked",false); // 각 체크박스 체크 해제 } } </script>

==> 전체선택이 체크된 상태에서 체크박스가 1개라도 체크가 해제될 경우 전체선택 해제되게 할 것

 


.attr()
    ㄴ> HTML의 속성을 취급
    ㄴ> html 에서 정의한대로 값(=요소의 현재 상태의 원래 값) 제공
    ㄴ> 모든 값이 String 으로 넘어옴

<ex>
<input value="hello" type="text"/> 
   ㄴ> 
.attr('value')   - 'hello'  반환

.prop()
    ㄴ> JavaScript 프로파티을 취급
    ㄴ> javascript / jquery를 통해 수정 된 요소의 값을 가져 올 때 좋음
    ㄴ> boolean, date, function 등으로 넘어옴

<ex>
$('input').prop('value', 'i changed the value');
   ㄴ> .prop('value') - 'i changed the value' 반환

.val()
     ㄴ> value 값 반환할 때 이용

.on( eventType, function() ) 
    ㄴ> 이번트 바인딩할 때 이용
    ㄴ> 
    ㄴ> 

<ex>
$("p").on("click", function(){
      alert("문장이 클릭되었습니다.");
});

$("p").on({  // 여러이벤트 바운딩 가능
    click: function() {
          $("div").append("마우스가 문장을 클릭했습니다.<br>");
    },     
    mouseenter: function() {
         $("div").append("마우스가 커서가 문장 위로 들어왔습니다.<br>");
    },
    mouseleave: function() {
         $("div").append("마우스가 커서가 문장을 빠져 나갔습니다.<br>");
    }
});

https://www.devkuma.com/


3. 전체선택 후 cbox 몇개 체크 해제하면 cboxAll 취소되게  --> 배열 사용

 방법1) 안먹힘!!!

<bash />
$(document).on("click","input:checkbox[name=cbox]",function(e)) { var cks = document.getElementsByName("cbox"); // "cbox"에 속성값으로 접근하겠다(변수명으로 하기엔 기니깐 cks 라는 변수에 담기!) var cksChecked = 0; // 체크된 cbox 0임을 선언 for(var i=0; i<cks.length; i++) { var cbox = cks[i]; //cbox가 여러개이므로 배열 사용 if(cbox.checked) { // cbox 체크되어있다면 증가처리 cksChecked ++; } } if(cks.length == cksChecked) {// cbox총개수 == cbox의 선택된 개수 $("#cboxAll").prop("checked",true); // 전체선택되게 } else { $("#cboxAll").prop("checked",false); // 선택해놓은 cbox만 선택되게(전체선택 해제) } };

 

방법2) https://dancepkt2.cafe24.com/bbs/board.php?bo_table=script&wr_id=98  

 

'Memo' 카테고리의 다른 글

팝업창  (0) 2023.04.10
FAQ  (0) 2023.03.17
** css  (0) 2023.03.15
footer 고정  (0) 2023.03.08
java 오류 정리  (0) 2023.02.10
profile

데일리로그C:

@망밍

포스팅이 도움됐다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!