2012-01-24 2 views
0

시나리오 : subformA간단한 jQuery를 결함

사용자가 첫번째 라디오 버튼 아 품종을 확인 subformB이해야 fadeIn 그가 확인 elseif 문 : 나는이 개 라디오 버튼 & 두 개의 하위 폼이있는 질문이 두 번째 라디오 버튼 subformB은 fadeIn해야합니다.

문제 : 내가 코드를 수행했지만 사용자가 넣다 그의 마음을 변경하고 대신 이전의 다른 옵션을 클릭하면 아 품종이 & 나타납니다 1 라디오 버튼을 확인할 때 문제가 있습니다. subformB는 subformA에 연결됩니다.

요청 : 해당 양식을 상호 배타적으로 만들려고합니다. 사용자가 라디오 버튼을 다시 선택하면 연결 효과가 발생하지 않아야합니다. 내가 눈치 채지 못하는 작은 것. 감사!

내 JS 코드 : : 코드의

<!-- script for the Div --> 
<script type="text/javascript" > 
$(document).ready(function() { 
$('#subafform').hide(); 
$("#element_4_1").click(function(){ 
    if($(this).is(':checked')) { 
      $('#subafform').fadeIn(); 
    } else { 
     $('#subafform').fadeOut(); 
    } 
    }); 
    }); 

</script> 

다른 부분 :

<script type="text/javascript" > 
$(document).ready(function() { 
$('#subbform').hide(); 
$("#element_4_2").click(function(){ 
    if($(this).is(':checked')) { 
      $('#subbform').fadeIn(); 
    } else { 
     $('#subbform').fadeOut(); 
    } 
    }); 
    }); 

</script> 




<li id="li_4" > 
    <label class="description" for="element_4">Are you affiliated with Company? </label> 
    <span> 
    <input id="element_4_1" name="element_4" class="element radio required" type="radio" value="1" /> 
    <label class="choice" for="element_4_1">Yes</label> 
    <input id="element_4_2" name="element_4" class="element radio required" type="radio" value="2" /> 
    <label class="choice" for="element_4_2">No</label> 

    </span> 
    </li> 






<li id="subafform"> 
    <ul> 
    <li id="li_5_1" > 
    <label class="description" for="element_5_1">Department/College </label> 
    <div> 
    <input id="element_5_1" name="element_5_1" class="element text medium" type="text" maxlength="255" value=""/> 
    </div> 
    </li> <li id="li_5_2" > 
    <label class="description" for="element_5_2">Department Chair </label> 
    <div> 
    <input id="element_5_2" name="element_5_2" class="element text medium" type="text" maxlength="255" value=""/> 
    </div> 
    </li> 



</li> 



<li id="subbform> 

........ 

.... 

</li> 
+0

두 조건이 모두 당신은 양식의 일부 HTML을 제공하십시오 수 있으며, #subafform을 보여? –

+0

양식 및 라디오 마크 업의 예를 게시 할 수 있다면 자신이 말하는 내용을 쉽게 이해할 수 있습니다. –

+0

그것의 단지 하나의'subform'의'js'는'elementid'와'subform name'을 제외하면 다른 서브 폼은 동일한 코드 행을 가지고 있습니다 – uday

답변

1

누군가가 클릭하고 이미 라디오 버튼을 선택했다면 계속 체크됩니다. 그래서 당신의 if 진술은 실제로 당신을 좋게하지 않습니다.

$("#element_4_1").click(function() { 
    $('#subafform').fadeIn(); 
    $('#subbfform').fadeOut(); 
} 
+0

당신은 그것을 바이올린으로 보여줄 수 있습니까? – uday

+0

예, 여기 예가 있습니다. http://jsfiddle.net/WzGeX/ –

+0

감사합니다. 왜'display : none;'이 CSS에 삽입 되었습니까? 나는 그 부분을 잊지 않는다. – uday

1

당신이이 있는지 확인 후 개별 라디오 버튼을 클릭하면 확인하고,하고있는 선택 여부. 음, 사용자가 물론 라디오 버튼을 클릭했기 때문에 선택 될 것입니다.

당신이해야 할 일은 if 문을 제거하고 버튼 A를 클릭하면 하위 폼 A 및 하위 폼 B가 사라지도록하는 것입니다. jQuery가 영리하다면 (나는 의심 스럽다.) 이미 사라져 버린 subformB는 사라지지 않을 것이므로 아무런 문제가 없다.

마찬가지로 버튼 B를 클릭하면 하위 양식 B 및 하위 양식 A가 흐리게 표시됩니다.

3

예 DOM :

<form class="subform" id="subforma"> 
    <button>Form A</button> 
</form> 

<form class="subform" id="subformb"> 
    <button>Form B</button> 
</form> 

<form id="switcher"> 
    <input type="radio" name="show_form" value="subforma"> Show Form A<br /> 
    <input type="radio" name="show_form" value="subformb"> Show Form B<br /> 
</form> 

내가 할 것이 항상 페이드 아웃 당신은을 클릭하고을 형성 할 때이 같은 간단한 B. 뭔가를 클릭 할 때 항상 페이드 아웃 형태 B를 가지고있다 예 JQuery와 :

$('input[name="show_form"]').click(function(){ 
    var form_id = this.value; 
    $('.subform:visible').fadeOut(); 
    $('#' + form_id).fadeIn(); 
}); 

예 CSS :

.subform { 
    display:none; 
    position:absolute; 
    top:0; 
    left:0; 
} 

#switcher { 
    position:relative; 
    top:100px; 
} 

데모 :

http://jsfiddle.net/AlienWebguy/hFax3/