기계는 거짓말하지 않는다

checkbox 확인, 변경, 강제클릭 본문

Web/JS

checkbox 확인, 변경, 강제클릭

KillinTime 2020. 12. 2. 17:52

JavaScript

var checkBox = document.getElementById("checkId");	// id로 오브젝트 얻기
alert(checkBox.checked);	// check 확인
checkBox.checked = true;	// check 값 변경
checkBox.click();	// 강제 클릭

 

JQuery

var checkBox = $("#checkId");	// id로 오브젝트 얻기
alert(checkBox.is(":checked"));	// check 확인
checkBox.prop("checked", true);	// check 값 변경
checkBox.trigger("click");	// 강제 클릭

 

Test

<body>
	<input type="checkbox" id="checkId">check<br>
	<a onclick="check()"><b style="font-size:20px; cursor:pointer; text-decoration:underline;">확인</b></a>
	
	<script>
		function check() {
			// JavaScript
			var checkBox = document.getElementById("checkId");	// id로 오브젝트 얻기
			
			console.log("JavaScript Check: " + checkBox.checked);	// check 확인
			
			checkBox.checked = true;	// check 값 변경
			console.log("JavaScript Check: " + checkBox.checked);
			
			checkBox.click();	// 강제 클릭
			console.log("JavaScript Click: " + checkBox.checked);
			
			// JQuery
			checkBox = $("#checkId");
			
			console.log("JQuery Check: " + checkBox.is(":checked"));	// check 확인
			
			checkBox.prop("checked", true);	// check 값 변경
			console.log("JQuery Check: " + checkBox.is(":checked"));
			
			checkBox.trigger("click");	// 강제 클릭
			console.log("JQuery Click: " + checkBox.is(":checked"));
		}
	</script>
</body>

HTML
Console

'Web > JS' 카테고리의 다른 글

radio 버튼 선택, 값 control  (0) 2020.12.03
select option 선택, 값 control  (0) 2020.12.03
오브젝트 얻어오기 (getElement)  (0) 2020.12.01
'Web/JS' Related Articles more
Comments