ふたりで

checkbox checked value control 본문

javascript

checkbox checked value control

graykang 2021. 1. 26. 16:00
728x90
반응형
SMALL

# 고유ID 값을 checkbox의 value에 저장 후 해당 value가 담긴 array[]를 서버로 전송하여 일괄 삭제 또는

  일괄저장 등을 할 경우 참조.

 

# html 소스

<tr>
	<td><input type="checkbox" class="js_checklist" value="1" value2="100" value3="1000"></input></td>
</tr>
<tr>
	<td><input type="checkbox" class="js_checklist" value="2" value2="200" value3="2000"></input></td>
</tr>
<tr>
	<td><input type="checkbox" class="js_checklist" value="3" value2="300" value3="3000"></input></td>
</tr>
<tr>
	<td><input type="checkbox" class="js_checklist" value="4" value2="400" value3="4000"></input></td>
</tr>
<tr>
	<td><input type="checkbox" class="js_checklist" value="5" value2="500" value3="5000"></input></td>
</tr>

 

#javascript 소스

<script type="text/javascript">
$(document).ready(function(){
    //checkbox를 click 할때 벨리데이션. 
    $("input[class=js_checklist]").click(function(){
    	if($(this).attr("value2") != 0 || $(this).attr("value3") != 0){
			alert("value2 또는 value3 이 0이 아닌 것은 전송불가.");
			//위조건에 해당하면 checkbox에 체크가 않되도록 처리.
            $(this).prop("checked",false);
    	}
    });

});
/*체크리스트 서버 전송 버튼클릭 펑션
* value2와 value3은 조건에 따른 value값 만을 서버에 전송 하기위해 사용 한다.
* 
*/
function checkDataSend(){
	var checkArry = new Array();
    //클레스 속성이 js_checklist인 체크박스중 체크된 것의 value 값을 array[] 변수 checkArry에 담는다.
	$("input[class=js_checklist]:checked").each(function() {

		var value = $(this).val();
		var value2 = $(this).attr('value2');
		var value3 = $(this).attr('value3');
				
		if(msCnt == 0 && faxCnt == 0){
			checkArry.push(value);
		}
		
	});

	//콘솔 결과로 체크된 체크박스의 value 값들이 출력 된다.
    console.log("checkArry[]"+checkArry);
    
    //ajax요청시 넘길 param 오브젝트 변수에 위에서 만든 checkArry를 담는다. 
	var param = {
			seqId : checkArry
	};
	
	$.ajax({
		method: "POST",
		url: ctx+"/send/setSeqIdDelete",//ctx(context path)는 글로벌 변수로 설정
		data: param,
		async: true,
		traditional : true,
		success: function (data) {
			if(data.result == "success"){
				alert("데이터를 전송 하였습니다.");
                //알럿 확인후 현재창 다시조회.
				location.reload(true);
			}else{
				alert(data.result);
			}
		}
		,beforeSend:function(xmlHttpRequest){

		}
		,error : function(request, status, error) {
			$('.wrap-loading').addClass('display-none');
			if( request.status == 400){
				window.location.replace(ctx+'/');
			}
		}
	});
	
};
</script>

 

 

 

 

 

 

 

 

728x90
반응형
LIST
Comments