Rumah > hujung hadapan web > tutorial js > 如何通过js实现动态改变radio状态(详细教程)

如何通过js实现动态改变radio状态(详细教程)

亚连
Lepaskan: 2018-06-04 10:48:55
asal
2790 orang telah melayarinya

下面我就为大家分享一篇js实现动态改变radio状态的方法,具有很好的参考价值,希望对大家有所帮助。

h5的radio是自带选中状态改变的,但是如果自带的状态无法满足自己的需求时,就需要自己去实现。

代码如下:

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

效果如下

这里实现的是顶部boder的动态显示隐藏并且这里radio左侧默认的圆形按钮设为了隐藏。如果想要按钮不隐藏,需要作如下修改

<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>
Salin selepas log masuk

即在每一个raido类型的input前面加一个img(注意选中和未选中的区别),JS的change方法做以下修改

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(&#39;class&#39;, &#39;active&#39;);
 }else {
  img[i].src = "images/delate_no_choose.png";
  radio[i].parentNode.setAttribute(&#39;class&#39;, &#39;&#39;);
 }
}
Salin selepas log masuk

img的length肯定和radio的length一样,所以可以只取一个length。

效果如下:

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

如何使用Vue-Router模式和钩子(详细教程)

在vue-cli中使用vue-router搭建底部导航栏(详细教程)

在AngularJS中使用select加载数据选中默认值的方法该怎么处理?

Atas ialah kandungan terperinci 如何通过js实现动态改变radio状态(详细教程). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan