[LWC] onclick 이벤트

일반적인 javaScript 문법

 

onclick='함수명(this)'

 <div class="checkbox_whole">
    <input type='checkbox' name='selectall' value='selectall' onclick='checkAll(this)'/> <b>Select All</b>
</div>   
<div class="checkbox_each">
    <input type='checkbox' name='color' value='red' onclick='checkEach(this)'/> RED
    <input type='checkbox' name='color' value='black' onclick='checkEach(this)'/> BLACK
    <input type='checkbox' name='color' value='blue' onclick='checkEach(this)'/> BLUE
</div>    

<script>
     const whole = document.querySelector('.checkbox_whole input[type="checkbox"]');

    const each = [...document.querySelectorAll('.checkbox_each input[type="checkbox"]')];

    function checkAll(e)  {
        each.forEach((el) => {
            el.checked = e.checked
         })
      }

    function checkEach()  {

    const checked = document.querySelectorAll('.checkbox_each input[type="checkbox"]:checked');

        each.forEach(() => {
            if(each.length === checked.length){
                whole.checked = true;
            }else{
                whole.checked = false;
            }
         })
      }
</script>

 

See the Pen checkbox_all_check_02 by gaae (@gaae) on CodePen.

 

salesforce js문법

 

onclick={함수명}

 

this 로 클릭한 요소를 반환할 수 있는데.. salesforce는 방법을 모르겠다..

 

 

html

<div class="checkbox_whole">
    <input type='checkbox' name='selectall' value='selectall' onclick={selectAll}'/> <b>Select All</b>
</div>   
<div class="checkbox_each">
    <input type='checkbox' name='color' value='red' onclick={checkSelectAll}'/> RED
    <input type='checkbox' name='color' value='black' onclick={checkSelectAll}'/> BLACK
    <input type='checkbox' name='color' value='blue' onclick={checkSelectAll}'/> BLUE
</div>

 

js

dom 호출시에도 this.template 로 호출한다.

 

import { LightningElement } from 'lwc';

export default class Bmc_srm_test extends LightningElement { //Bmc_srm_test컨포넌트명

     checkAll()  {
        const whole  = this.template.querySelector('.checkbox_whole input[type="checkbox"]');
		const each = this.template.querySelectorAll('.checkbox_each input[type="checkbox"]');

        each.forEach((el) => {
            if(whole.checked === true){
                el.checked = true;
            }else{
                el.checked = false;
            }
        })
      }

      checkEach()  {
        const whole = this.template.querySelector('.checkbox_whole input[type="checkbox"]');
        const each = this.template.querySelectorAll('.checkbox_each input[type="checkbox"]');
        const checked = this.template.querySelectorAll('.checkbox_each input[type="checkbox"]:checked');

        each.forEach(() => {
             if(each.length === checked.length){
                 whole.checked = true;
             }else{
                 whole.checked = false;
             }
        })
      }

}