[ 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");
        }
    });
});