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

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

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

코드는 다음과 같습니다.

h5 부분 코드

<p class="group">
 <label class="active">
  <input type="radio" name="parent_radio" value="1" id="new_data" onclick="change()"/>
  最新资料</label>
 <label>
  <input type="radio" name="parent_radio" value="0" id="my_data" onclick="change()"/>
  我的资料</label>
 <label>
  <input name="parent_radio" type="radio" id="screen_data" value="0" onclick="change()"/>
  分类浏览</label>
 <label>
  <input type="radio" name="parent_radio" value="0" id="history_data" onclick="change()"/>
  浏览历史</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 type = "text/javascript">
 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 class="group">
 <label class="active"><img src="images/delate_choose.png" name="image">
  <input type="radio" name="parent_radio" value="1" id="new_data" onclick="change()"/>
  最新资料</label>
 <label>
  <img src="images/delate_no_choose.png" name="image">
  <input type="radio" name="parent_radio" value="0" id="my_data" onclick="change()"/>
  我的资料</label>
 <label>
  <img src="images/delate_no_choose.png" name="image">
  <input name="parent_radio" type="radio" id="screen_data" value="0" onclick="change()"/>
  分类浏览</label>
 <label>
  <img src="images/delate_no_choose.png" name="image">
  <input type="radio" name="parent_radio" value="0" id="history_data" onclick="change()"/>
  浏览历史</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 < radioLength;i++)
{
 if(radio[i].checked)
 {
  img[i].src = "images/delate_choose.png";
  radio[i].parentNode.setAttribute('class', 'active');
 }else {
  img[i].src = "images/delate_no_choose.png";
  radio[i].parentNode.setAttribute('class', '');
 }
}

img의 길이는 반드시 라디오의 길이와 동일하므로 한 길이만 가져가시면 됩니다.

효과는 다음과 같습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

WeChat 웹 측에서 백포스 새로 고침을 구현하는 방법

React Native는 fetch를 사용하여 이미지를 업로드합니다.

js를 사용하여 html 페이지에서 이미지 주소를 빠르게 가져옵니다

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