반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- FCM
- popup
- nodejs
- PM2
- NextJS
- yona
- node.js
- git
- pwa
- security
- mybatis
- docker
- mysql
- config
- Java
- Maven
- jenkins
- MariaDB
- submit
- ajax
- spring3
- jquery
- rocky9
- javascript
- MSsql
- Next.js
- Push
- SpringBoot
- Eclipse
- centos7
Archives
- Today
- Total
ふたりで
checkbox checked value control 본문
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
'javascript' 카테고리의 다른 글
javascript 전화번호 휴효성 검사 (0) | 2021.03.30 |
---|---|
PopUp화면 POST방식으로 처리... (0) | 2021.03.25 |
jquery li each 사용 Attribute 참조하기. (0) | 2021.01.12 |
javascript 브라우저 구분하기 (0) | 2020.12.01 |
GET URL호출시 화면로딩 후 parameter 삭제 (0) | 2020.11.17 |
Comments