代码之家 › 专栏 › 技术社区 › DivineChef

Javascript Array单选按钮切换DIV视图

toggle arrays css javascript

DivineChef · 技术社区 · 12 年前

我在一个id=j1 id=j2 id=j3 id=j4的组中有4个单选按钮,需要切换DIVS id=act1 id=act2 id=act3 id=act4的视图。我见过一些例子,但不是很像这样。

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(乱糟糟的需要清理!)

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";
            }

        }

       }

    }
   }

2 回复 | 直到 12 年前

Adnan Topal 12 年前

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

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

saikiran 12 年前

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();

    });
});

DEMO HERE