Question

我有一个组中有4个单选按钮，id = j1 id = j2 id = j3 id = j4需要切换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（凌乱的凌乱需要清理！）

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

        }

       }

    }
   }

Answer 1

您无需检查每个元素。这是一个用jQuery创建的简单工作示例：

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

Answer 2

<强> 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

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

2 个答案: