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