Jquery를 사용하는 라디오 버튼 그룹의 라디오 버튼과 함께 입력 필드를 표시하는 결합 기능

라디오 번호가 그룹이고 옵션이 n 개 있습니다. 각 라디오 버튼은 그룹의 해당 라디오 옵션이 선택된 경우에만 표시하려는 슬라이더 옆에 있습니다. 더 좋은 방법이 있다면Jquery를 사용하는 라디오 버튼 그룹의 라디오 버튼과 함께 입력 필드를 표시하는 결합 기능

if ($('#rToggle').is(':checked')) { 
     $('#pSlider1').show(); }

난 그냥 궁금 해서요 :

나는 전 점검 때 그것을 표시하는 ID로 ID와 각 슬라이더와 시간의 각 라디오 버튼 N 번호를 식별 할 수도있을 것 같군요 가능한 한 적은 IF 문으로이를 수행하십시오.

코드 (개인 ID로) 제안했다 (IDS없이)이

 <tr> 
     <td class="first-column">&nbsp;</td> 
     <td> 
      <div class="layout-slider layout-slider-radio"> 
      <input type="radio" id="rToggle" name="periodType" default> 
      </div> 
      <div class="layout-slider layout-slider-label">Day</div> 
      <div id="pSlider1" class="layout-slider layout-slider-slider"> 
      <input id="Slider2" type="slider" name="day" value="2;15" /> 
      </div> 
     </td> 
     </tr>

실제 코드 : ...

 <tr> 
     <td class="first-column">&nbsp;</td> 
     <td> 
      <div class="layout-slider layout-slider-radio"> 
      <input type="radio" name="periodType" default> 
      </div> 
      <div class="layout-slider layout-slider-label">Day</div> 
      <div class="layout-slider layout-slider-slider"> 
      <input id="Slider1" type="slider" name="day" value="2;15" /> 
      </div> 
     </td> 
     </tr> 
     <tr> 
     <td class="first-column">&nbsp;</td> 
     <td> 
      <div class="layout-slider layout-slider-radio"> 
      <input type="radio" name="periodType" default> 
      </div> 
      <div class="layout-slider layout-slider-label">Month</div> 
      <div class="layout-slider layout-slider-slider"> 
      <input id="Slider2" type="slider" name="month" value="2;15" /> 
      </div> 
     </td> 
     </tr> 
     <tr> 
     <td class="first-column">&nbsp;</td> 
     <td> 
      <div class="layout-slider layout-slider-radio"> 
      <input type="radio" name="periodType" default> 
      </div> 
      <div class="layout-slider layout-slider-label">Year</div> 
      <div class="layout-slider layout-slider-slider"> 
      <input id="Slider3" type="slider" name="year" value="2;15" /> 
      </div> 
     </td> 
     </tr>

이 행이 N 시간 동안 계속

출처

2012-06-26 user1038814

몇 가지 옵션이 있습니다.

<td> 
    <div class="layout-slider layout-slider-radio"> 
     <input type="radio" name="periodType" data-sliderid="pSlider1" default> 
    </div> 
    <div class="layout-slider layout-slider-label">Day</div> 
    <div id="pSlider1" class="layout-slider layout-slider-slider"> 
     <input id="Slider1" type="slider" name="day" value="2;15" /> 
    </div> 
</td>

자바 스크립트를

HTML

$('input[name="periodType"]').change(function() { 
    if(this.checked) { 
     $('#' + $(this).data('sliderid')).show(); 
    } 
});

또는 DOM 탐색을 사용

예를 들어 라디오 버튼에 data-sliderid 속성과 슬라이더를 포함 <div>에 ID를 넣어 :

$('input[name="periodType"]').change(function() { 
    var $sliderDiv = $(this).closest('div').siblings('.layout-slider-slider'); 
    if(this.checked) { 
     $sliderDiv.show(); 
    } 
});

출처

2012-06-26 11:00:39

감사합니다 anthony, Dom 횡단 훌륭한 작동합니다. 사용자가 새 라디오 그룹을 선택하면 마지막으로 선택한 라디오 그룹의 슬라이더를 숨길 수 있습니까? – user1038814

'change' 이벤트를 발생시킨 것과 동일한'name' 속성을 가진 체크되지 않은 모든 라디오 입력을 선택하고, 각각에 대해 동일한 DOM 탐색을 수행하고 그 요소를 숨길 수 있습니다. 더 쉬운 방법이 있을지 확신하지 못합니다. ** 모든 라디오 요소의 ** 이름이 같은'name' 속성을 가지고 ** 페이지의 모든 ** 슬라이더가 해당 라디오에만 연결된 경우 요소를 숨기려면'$ ('. layout-slider-slider')를 사용하여 모든 요소를 숨길 수 있습니다. –

is : checked 함수는 상태를 한 번만 검사합니다. 원하는 경우 체크 표시/체크 해제 할 때마다 표시를 전환하기 때문에 다음과 같은 변경 이벤트를 사용해야합니다.

$("input[type=radio][name=foo]").change(function() { 
     $("#div").toggle(); 
});

출처

2012-06-26 10:48:07 SexyBeast

Jquery를 사용하는 라디오 버튼 그룹의 라디오 버튼과 함께 입력 필드를 표시하는 결합 기능

답변

관련 문제