Javascript 数组单选按钮切换 DIV 的视图

Javascript Array Radio Button Toggle view of DIVs

本文关键字：DIV 视图 数组 单选按钮 Javascript      更新时间：2023-09-26

我在一个id=j1 id=j2 id=j3 id=j4的组中有4个单选按钮，需要切换DIVS的视图 id=act1 id=act2 id=act3 id=act4 我所做的工作有效，但我想要一个数组，最好是JavaScript或JavaScript和JQuery。我见过一些例子，但不太像这样。

.HTML

     <input id="j1" name="h2" type="radio" value="" onclick="showRisk();">
     <label  for="j1">Not At Acute Risk </label><BR>
     <input id="j2" name="h2" type="radio" value="" onclick="showRisk();">
     <label  for="j2"> Low Acute Risk </label><BR>
     <input id="j3" name="h2" type="radio" value="" onclick="showRisk();">
     <label  for="j3"> Intermediate Acute Risk</label><BR>
     <input id="j4" name="h2" type="radio" value="" onclick="showRisk();">
     <label  for="j4"> High Acute Risk </label><BR>
   <div id="act1">
   Content1
   </div>
  <div id="act2">
  Content2
  </div>
  <div id="act3">
   Content3
  </div>
  <div id="act4">
  Content4
  </div>

.CSS

    [id^="act"]   {
   display: none;
    }

JAVASCRIPT（Messy Messy 需要清理！）

function showRisk() {
if (document.getElementById("j1").checked == true)  {
document.getElementById("act1").style.display="block";
document.getElementById("act2").style.display="none";
document.getElementById("act3").style.display="none";
document.getElementById("act4").style.display="none";
} else {
document.getElementById("act1").style.display="none";

if (document.getElementById("j2").checked == true)  {
document.getElementById("act1").style.display="none";
document.getElementById("act2").style.display="block";
document.getElementById("act3").style.display="none";
document.getElementById("act4").style.display="none";   
} else {
document.getElementById("act2").style.display="none";
if (document.getElementById("j3").checked == true)  {
document.getElementById("act1").style.display="none";
document.getElementById("act2").style.display="none";
document.getElementById("act3").style.display="block";
document.getElementById("act4").style.display="none";   
} else {
document.getElementById("act3").style.display="none";
if (document.getElementById("j4").checked == true)  {
document.getElementById("act1").style.display="none";
document.getElementById("act2").style.display="none";
document.getElementById("act3").style.display="none";
document.getElementById("act4").style.display="block";  
} else {
    document.getElementById("act4").style.display="none";
            }
        }
       }
    }
   }

你不需要检查每个元素。下面是一个用jQuery创建的简单工作示例：

http://jsbin.com/fokol/1/

HTML： 

<input type="radio" id="j1" name="r" value="act1" checked>j1
<input type="radio" id="j2"  name="r"  value="act2">j2
<input type="radio" id="j3"  name="r"  value="act3">j3
<input type="radio" id="j4"  name="r"  value="act4">j4
    <div id="act1" class="block">act1</div>
    <div id="act2" class="block" style="display: none;">act2</div>
    <div id="act3" class="block" style="display: none;">act3</div>
    <div id="act4" class="block" style="display: none;">act4</div>

.css：

div{
    border:1px solid black;
    width: 100px;
    height: 50px;
}

JAVASCRIPT：

$('document').ready(function(){
    $('input').click(function(){
        $('.block').hide();
            $('#' + $("input:radio[name='r']:checked").val()).show();
    });
});

在这里演示

相关文章：