[jquery] 체크박스 이벤트
개발 Programming/JQUERY2018. 9. 4. 18:05
<!DOCTYPE html>
<html>
<head>
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
var j$ = jQuery.noConflict();
j$(document).ready(function(){
var data=['양약','한약','의약품','의약외품','일반의약품','의료용품','기타'];
var UP_JONG=['양약','한약','의약품','의약외품','의료기기','일반의약품','의료용품'];
var UP_TAE=['소매업','도매업','소매및도매','도소매업'];
//업종 체크박스 생성
var upjongTag = '';
var cellCnt =2;
upjongTag +='<table>';
upjongTag +=' <table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>';
for(var j=0; j< UP_JONG.length;j++){
upjongTag +='<td width="100">';
upjongTag +='<input type="checkbox" name="test" value="'+UP_JONG[j]+'">'+UP_JONG[j]+'</input>';
if((j+1)%cellCnt ==0){
upjongTag +='</tr><tr>';
}
}
j$('#upJong').html(upjongTag);
//업태 체크박스 생성
//데이터를 String 값으로 가져왔다는 가정하에 체크박스 체크처리
j$("input[name=test]").each(function(index,item){
var isMatched = false;
for(var i=0; i < data.length; i++){
if(item.value == data[i]){
item.checked = true;
data.splice(i,1);
}
}
});
//매칭 체크박스 값이 없을때 기타 입력창에 표기 되도록 함
if(data != ''){
j$("input[name=testetc").val(data);
}
//클릭 이벤트시 String값으로 넘어갈 수 있도록 셋팅함(submit 대응 테스트)
j$(document).on('click','#upJong',function(){
var output = '';
j$("input[name=test]:checked").each(function(index,item){
output += output != '' ? ','+item.value :item.value;
});
if(j$("input[name=testetc").val() != ''){
output += output != '' ? ','+j$("input[name=testetc").val() : j$("input[name=testetc").val();
}
var array = output.split(',');
j$(array).each(function(index,item){
//alert(index+":"+item);
});
alert(output);
j$('input[name=userPBean.upjong]').value(output);
});
});
</script>
</head>
<body>
<!--<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width='100'><input type='checkbox' name='test' id ='test' value='양약'>양약</input></td>
<td width='100'><input type='checkbox' name='test' id ='test' value='한약'>한약</input></td>
<td width='100'><input type='checkbox' name='test' id ='test' value='의약품'>의약품</input></td>
</tr>
</table>
<input type='checkbox' name='test' id ='test' value='양약'>양약</input>
<input type='checkbox' name='test' id ='test' value='한약'>한약</input>
<input type='checkbox' name='test' id ='test' value='의약품'>의약품</input>
<input type='checkbox' name='test' id ='test' value='의약외품'>의약외품</input> -->
<div id='upJong'></div>
기타 <input type='text' name='testetc' id ='testetc' />
<input name="userPBean.upjong" type="hidden" class="input1" size="16" maxlength="50" />
<button >test</button>
<div id='upTae'></div>
</body>
</html>
'개발 Programming > JQUERY' 카테고리의 다른 글
| [jquery] 시각 효과- animate(),stop(),clearQueue(), delay() (0) | 2018.09.05 |
|---|---|
| [jquery] 입력 양식 이벤트 (0) | 2018.09.05 |
| [jquery] 체크박스 체크 예제 (0) | 2018.09.04 |
| [jquery] 윈도우 이벤트 (0) | 2018.09.04 |
| [jquery] 키보드 이벤트 (0) | 2018.09.04 |
댓글()