[ Web 관련 ]/jQuery
◈ 체크박스 이벤트 바인딩, 속성 추가 (addEventListener)
BIZLAB
2023. 3. 5. 19:14
이벤트 바인딩 참고
<button id="btn">클릭</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function() {
console.log('[onclick] 이건');
}
btn.onclick = function() {
console.log('[onclick] 한 마지막 코드가 호출됨');
}
btn.addEventListener('click', function() {
console.log('[EventListener] 이건');
});
btn.addEventListener('click', function() {
console.log('[EventListener] 계속 추가됨');
});
</script>
if ($('.nav-link').length > 0) {
$('.nav-link').click(function() {
//
});
}
$(document).ready(function() {
$('input[type=checkbox][name=gender]').change(function() {
if ($(this).is(':checked')) {
alert(`${this.value} is checked`);
}
else {
alert(`${this.value} is unchecked`);
}
});
});
https://devlink.tistory.com/749
<img src="img_pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213">
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").attr("width", "500");
});
});
</script>
<p style="font-size:120%;color:red">This is a paragraph.</p>
<p style="font-weight:bold;color:blue">This is another paragraph.</p>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").removeAttr("style");
});
});
</script>
//약관2 사용체크시 내용 유효성 점사를 위한 속성 추가
$(document).ready(function() {
$('input[name=cf_landing_agree2_use]').change(function() {
if ($(this).is(':checked')) {
$('input[name=cf_landing_agree2]').attr("req", "약관 2 이름");
$('textarea[name=cf_landing_agree2_content]').attr("req", "약관 2 내용");
}else {
$('input[name=cf_landing_agree2]').removeAttr("req");
$('textarea[name=cf_landing_agree2_content]').removeAttr("req");
}
});
$('input[name=cf_landing_agree3_use]').change(function() {
if ($(this).is(':checked')) {
$('input[name=cf_landing_agree3]').attr("req", "약관 3 이름");
$('textarea[name=cf_landing_agree3_content]').attr("req", "약관 3 내용");
}else {
$('input[name=cf_landing_agree3]').removeAttr("req");
$('textarea[name=cf_landing_agree3_content]').removeAttr("req");
}
});
});