JS를 사용하여 라디오 상태를 변경하는 방법

이번에는 JS를 사용하여 라디오 상태를 변경하는 방법을 보여드리겠습니다. JS를 사용하여 라디오 상태를 변경할 때 주의해야 할 주의 사항은 무엇입니까? 살펴보자.

h5의 라디오에는 선택된 상태 변경 기능이 내장되어 있지만, 내장된 상태가 요구 사항을 충족할 수 없는 경우 직접 구현해야 합니다.

코드는 다음과 같습니다.

h5 부분 코드

<p>
 <label>
  <input>
  最新资料</label>
 <label>
  <input>
  我的资料</label>
 <label>
  <input>
  分类浏览</label>
 <label>
  <input>
  浏览历史</label>
</p>

CSS 코드

<style>
 input[type="radio"] {
  /*取消自带按钮*/
  color:gray;
  display: none;
 }
 .group>label:hover{
  /*鼠标移到控件上做的改变*/
  background-color: cornflowerblue;
 }
 .group>label{
  /*未选中状态*/
  float: left;
  color: #4A4A4A;
  font-size: 16px;
  padding: 10px 11px;
 }
 .group>label.active{
  /*选中状态*/
  color: #316CEB;
  font-size: 16px;
  border-top: 2px solid #316CEB;
  padding: 10px 11px;
 }
</style>

JS 메소드 코드

<script>
 function change()
 {
  var radio = document.getElementsByName("parent_radio");
  /*用ByName是为了取到所有的radio*/
  var radioLength = radio.length;
  for(var i = 0;i < radioLength;i++)
  {
   if(radio[i].checked)
   {
    radio[i].parentNode.setAttribute(&#39;class&#39;, &#39;active&#39;);
   }else {
    radio[i].parentNode.setAttribute(&#39;class&#39;, &#39;&#39;);
   }
  }
 }
</script>

효과는 다음과 같습니다

여기서 구현한 것은 상단입니다. 보더의 동적 표시가 숨겨지고 라디오 왼쪽의 기본 원형 버튼이 숨김으로 설정됩니다. 버튼이 숨겨지지 않게 하려면 다음과 같이 수정해야 합니다

<p>
 <label><img  src="/static/imghwm/default1.png" data-src="images/delate_choose.png" class="lazy" alt="JS를 사용하여 라디오 상태를 변경하는 방법" >
  <input>
  最新资料</label>
 <label>
  <img  src="/static/imghwm/default1.png" data-src="images/delate_no_choose.png" class="lazy" alt="JS를 사용하여 라디오 상태를 변경하는 방법" >
  <input>
  我的资料</label>
 <label>
  <img  src="/static/imghwm/default1.png" data-src="images/delate_no_choose.png" class="lazy" alt="JS를 사용하여 라디오 상태를 변경하는 방법" >
  <input>
  分类浏览</label>
 <label>
  <img  src="/static/imghwm/default1.png" data-src="images/delate_no_choose.png" class="lazy" alt="JS를 사용하여 라디오 상태를 변경하는 방법" >
  <input>
  浏览历史</label>
</p>

즉, 각 레이드 유형 입력 앞에 img를 추가하고(선택한 것과 선택하지 않은 것의 차이점에 유의하세요) JS 변경 방법

var radio = document.getElementsByName("parent_radio");
var img = document.getElementsByName("image");
/*用ByName是为了取到所有的radio*/
var radioLength = radio.length;
for(var i = 0;i <p style="text-align: left;">img의 길이는 반드시 라디오의 길이와 동일하므로 한 길이만 가져가시면 됩니다. </p><p style="text-align: left;"><strong>효과는 다음과 같습니다. </strong></p><p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/a9211bdc751509e818a1652e87465ad5-1.gif?x-oss-process=image/resize,p_40" class="lazy" alt=""></p><p>이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! </p><p>추천 자료: </p><p><a href="http://www.php.cn/js-tutorial-388955.html" target="_blank">WeChat 웹 측에서 백포스 새로 고침을 구현하는 방법</a><br></p><p><a href="http://www.php.cn/js-tutorial-388939.html" target="_blank">React Native는 fetch를 사용하여 이미지를 업로드합니다.</a><br></p><p><a href="http://www.php.cn/js-tutorial-388951.html" target="_blank">js를 사용하여 html 페이지에서 이미지 주소를 빠르게 가져옵니다</a> <br></p>

위 내용은 JS를 사용하여 라디오 상태를 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!