Salesforce
[LWC] onclick 이벤트
오늘의갈비찜
2024. 7. 10. 16:52
728x90
일반적인 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>
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;
}
})
}
}
728x90