체크박스 선택에 따라 입력필드를 다르게 표시

안녕하세요.

체크박스 선택에 따라서 입력필드가 다르게 보이도록 Jquery 코드를 만들었습니다.

A, B ,C value의 체크박스를 만들었습니다. 예를들어 A나 C가 체크되었을때는 1~5까지의 입력필드가 표시되고

B가 체크되었을때는 5개의 입력필드에 6~8까지의 3개의 입력필드가 추가로 표시되도록 만들었습니다.

A와 B는 카테고리1, C는 카테고리 2로 만들었고 (커뮤니티 검색으로 카테고리의 셀렉트 박스는 체크박스로 변경시켰습니다.)

A와 B는 서로 중복체크가 되지 않도록 A클릭시 B를 disalbed, B클릭시 A를 disabled 되도록 코드를 추가하였습니다.

 

 

<script type="text/javascript">
		jQuery(document).ready(function(){
			jQuery('input[value="B"]').change(function(){
				if(jQuery(this).is(":checked")){
				   jQuery('.kboard-attr-row.meta-key-6').show();
				   jQuery('.kboard-attr-row.meta-key-6').addClass('required');
				   jQuery('.kboard-attr-row.meta-key-7').show();
				   jQuery('.kboard-attr-row.meta-key-7').addClass('required');
				   jQuery('.kboard-attr-row.meta-key-8').show();
				   jQuery('.kboard-attr-row.meta-key-8').addClass('required');

				}
				else {
				   jQuery('.kboard-attr-row.meta-key-6').hide();
				   jQuery('.kboard-attr-row.meta-key-6').removeClass('required');
				   jQuery('.kboard-attr-row.meta-key-7').hide();
				   jQuery('.kboard-attr-row.meta-key-7').removeClass('required');
				   jQuery('.kboard-attr-row.meta-key-8').hide();
				   jQuery('.kboard-attr-row.meta-key-8').removeClass('required');
				}
			});
		})
		jQuery(document).ready(function(){
				if(jQuery('input[value="B"]').is(":checked")){
				   jQuery('.kboard-attr-row.meta-key-6').show();
				   jQuery('.kboard-attr-row.meta-key-6').addClass('required');
				   jQuery('.kboard-attr-row.meta-key-7').show();
				   jQuery('.kboard-attr-row.meta-key-7').addClass('required');
				   jQuery('.kboard-attr-row.meta-key-8').show();
				   jQuery('.kboard-attr-row.meta-key-8').addClass('required');
				}
				else {
				   jQuery('.kboard-attr-row.meta-key-6').hide();
				   jQuery('.kboard-attr-row.meta-key-6').removeClass('required');
				   jQuery('.kboard-attr-row.meta-key-7').hide();
				   jQuery('.kboard-attr-row.meta-key-7').removeClass('required');
				   jQuery('.kboard-attr-row.meta-key-8').hide();
				   jQuery('.kboard-attr-row.meta-key-8').removeClass('required');
			}
		});
</script>

 

위의 코드로 최초 글 작성시 B를 체크했을 때 입력필드가 추가되기 위해 change를 사용하고 

글 수정시 체크 여부를 확인하고자 is를 사용했습니다. 제가 위의 코드를 추가하여 확인했을 때는 정상적으로 작동하는 것을 확인했습니다.

다만 대부분의 사용자는 특정 상황에서 오류가 발생해서 추가필드를 입력받지 못하는 문제가 있습니다.

카테고리1에서 B를 체크하고 카테고리 2에서 C를 체크하면 추가필드가 표시되므로 사용자는 추가필드를 입력해야 하는 것이 정상인데요.

사용자들이 글을 작성한 것을 보면 B와 C를 동시에 체크한 경우 추가필드가 누락되어 있습니다. 대략 90%이상의 경우가 그렇네요. (B만 체크한 경우에는 추가필드 누락이 없었습니다.)

 

브라우저 버전이나 자바스크립트 비활성화가 의심되어 구형브라우저와 자바스크립트 비활성화시 페이지 접속을 차단했지만 여전히 위와 같은 문제가 발생합니다. 

참고로 스킨은 default를 수정하여 사용했습니다. 

제가 확인했을 때는 전혀 문제 구현이 안되고

위와 같이 B와 C를 동시에 체크한 대부분의 사용자에게만 문제가 발생하는데 이러한 증상이 발생하는 사용자 환경이나 시스템에 문제가 있을 수 있을까요?

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
  • 안녕하세요~^^

    남겨주신 코드만 봤을 때는 

    딱히 이상한 점을 발견하기가 어렵습니다.

     

    파이어폭스 등의 다른 브라우저와

    모바일 환경에서도

    각각 테스트 및 확인 해보시겠어요?

    고맙습니다.

  • 안녕하세요^^

     

    브라우저 및 모바일 환경은 확인했는데 문제가 없네요ㅠ

     

    10명 정도의 사용자에게 확인해보니 모두 카테고리2에 있는 C만 체크하고 카테고리1에 있는 B는 체크하지 않았다고 합니다. (그런데 작성된 글에는 카테고리에 B와 C가 기록되어 있습니다.)

     

    제가 카테고리1과 2를 체크박스로 바꾸기 위해 아래의 코드를 사용했는데요..

     

    /*kboard category select box to checkbox*/
    add_filter('kboard_get_template_field_html', 'kboard_get_template_field_html_20201210', 10, 4);
    function kboard_get_template_field_html_20201210($field_html, $field, $content, $board){
    	$meta_key = isset($field['meta_key']) ? $field['meta_key'] : '';
    	$field_name = (isset($field['field_name']) && $field['field_name']) ? $field['field_name'] : $field['field_label'];
    	$required = (isset($field['required']) && $field['required']) ? $field['required'] : '';
    	
    	if($meta_key== 'category1' && $board->id == '5'){
    		ob_start();
    		?>
    		<?php if(!$board->isTreeCategoryActive()):?>
    			<?php if($board->initCategory1()):?>
    				<div class="kboard-attr-row <?php echo esc_attr($field['class'])?> <?php echo esc_attr($required)?>">
    					<label class="attr-name" for="<?php echo esc_attr($meta_key)?>"><span class="field-name"><?php echo esc_html($field_name)?></span><?php if($required):?> <span class="attr-required-text">*</span><?php endif?></label>
    					<div class="attr-value">
    						<?php while($board->hasNextCategory()):?>
    							<input type="checkbox" name="category1" value="<?php echo $board->currentCategory()?>"<?php if($content->category1 == $board->currentCategory()):?> checked<?php endif?>>
    							<?php echo $board->currentCategory()?>
    						<?php endwhile?>
    						<label class="attr-reset-button" style="cursor:pointer;display:none;" onclick="kboard_radio_reset(this)">초기화</label>
    						<?php if(isset($field['description']) && $field['description']):?><div class="description"><?php echo esc_html($field['description'])?></div><?php endif?>
    					</div>
    				</div>
    			<?php endif?>
    		<?php endif?>
    		<?php
    		$field_html = ob_get_clean();
    	}
    	
    	return $field_html;
    }
    
    
    add_filter('kboard_get_template_field_html', 'kboard_get_template_field_html_20201210_1', 10, 4);
    function kboard_get_template_field_html_20201210_1($field_html, $field, $content, $board){
    	$meta_key = isset($field['meta_key']) ? $field['meta_key'] : '';
    	$field_name = (isset($field['field_name']) && $field['field_name']) ? $field['field_name'] : $field['field_label'];
    	$required = (isset($field['required']) && $field['required']) ? $field['required'] : '';
    	
    	if($meta_key== 'category2' && $board->id == '5'){
    		ob_start();
    		?>
    		<?php if(!$board->isTreeCategoryActive()):?>
    			<?php if($board->initCategory2()):?>
    				<div class="kboard-attr-row <?php echo esc_attr($field['class'])?> <?php echo esc_attr($required)?>">
    					<label class="attr-name" for="<?php echo esc_attr($meta_key)?>"><span class="field-name"><?php echo esc_html($field_name)?></span><?php if($required):?> <span class="attr-required-text">*</span><?php endif?></label>
    					<div class="attr-value">
    						<?php while($board->hasNextCategory()):?>
    							<input type="checkbox" name="category2" value="<?php echo $board->currentCategory()?>"<?php if($content->category2 == $board->currentCategory()):?> checked<?php endif?>>
    							<?php echo $board->currentCategory()?>
    						<?php endwhile?>
    						<label class="attr-reset-button" style="cursor:pointer;display:none;" onclick="kboard_radio_reset(this)">초기화</label>
    						<?php if(isset($field['description']) && $field['description']):?><div class="description"><?php echo esc_html($field['description'])?></div><?php endif?>
    					</div>
    				</div>
    			<?php endif?>
    		<?php endif?>
    		<?php
    		$field_html = ob_get_clean();
    	}
    	
    	return $field_html;
    }

     

    예를들어 B와 C를 체크했다가 B를 체크해제한 경우라든가.

    C만 체크했는데 C와 B가 선택되었다고 기록될 수가 있을까요?

     

     

     

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기