[jQuery] input radio 텝 스크립트


라디오 박스 선택과 관련되서 텝 형식의 js가 필요할때
잘 써보지 않았는데 모바일 관련 작업을 할때 은근 쓸기회가 많아 지는 것 같더군요.
.change()
PC에서 작업할때는 왜 생각이 안날까...

https://api.jquery.com/change/

<div class="specs">
<ul>
<li>
<input type="radio" id="specs_01" name="specs" checked /><a href="#"><label for="specs_01">specs_01</label></a>
</li>
<li>
          <input type="radio" id="specs_02" name="specs" /><a href="#"><label for="specs_02">specs_02</label></a>
</li>
<li>
<input type="radio" id="specs_03" name="specs" /><a href="#"><label for="specs_03">specs_03</label></a>
</li>

<div class="specs_01 specsBox">1</div>
<div class="specs_02 specsBox">2</div>
<div class="specs_03 specsBox">3</div>
</ul>
</div>

.specsBox{display:none;}

$("div.specs_01").show();
$(":radio[name='specs']").change(function() {
  var specs = $(this).prop("checked",true).attr("id");
  $("div.specs  div").hide();
  if(specs == "specs_01"){
    $("div.specs_01").show();
  }else if(specs == "specs_02"){
    $("div.specs_02").show();
  }else if(specs == "specs_03"){
    $("div.specs_03").show();
  }
});

https://jsfiddle.net/aoiyuki4u/xken772o/

댓글

이 블로그의 인기 게시물

[iOS] body 스크롤 막기

[html] 모바일웹 작업 팁 정리중...

Swiper lazyLoading