使用Javascript切换基于复选框的div的可见性

2018-06-19 21:50:54

我希望所有div在加载时都隐藏起来。然后我想显示/隐藏Divs，具体取决于选中哪个复选框。

对于我的例子，我有3辆跑车：

跑车1 =显示，没有GPS。

跑车2 = GPS和显示器。

跑车3 = GPS，无显示。

所以当选择跑车时，它会显示包含所有跑车模型的'sportsCarAll'Div（同时保留所有其他DIV隐藏）。

但是，当选择跑车+ GPS时，它会显示'sportsCarGps'Div并隐藏其他Div。

我是JavaScript新手，所以任何帮助将不胜感激。

HTML ：

<div>
    <input type="checkbox" id="sportsCar" name="cartype">
    <input type="checkbox" id="gps" name="extraGps">
    <input type="checkbox" id="display" name="extraDisplay">
</div>
<div id="sportsCarAll">
    <h2>Sports Car 1, Sports Car 2 or Sports Car 3</h2>
</div>
<div id="sportsCarGps">
    <h2>Sports Car 2 or Sports Car 3</h2>
</div>
<div id="sportsCarDisplay">
    <h2>Sports Car 1 or Sports Car 2</h2>
</div>
<div id="sportsCarGpsAndDisplay">
    <h2>Sports Car 2</h2>
</div>

这是我试图使用的Javascript，但无济于事。任何帮助，将不胜感激。

   <script type="text/javascript" language="JavaScript">
       function hideDiv() {
        document.getElementById('sportsCarAll').style.visibility= 'hide';
        sportsCarGps.style.visibility = 'hide';
        document.getElementById('sportsCarDisplay').style.visibility = 'hide';
        document.getElementById('sportsCarGpsAndDisplay').style.visibility = 'hide';
        }

function showContent(){
if(document.getElementById('sportsCar').checked && 
document.getElementById('gps').checked &&
  document.getElementById('display').checked){
        document.getElementById('sportsCarGpsAndDisplay').style.visibility = 'show'
        document.getElementById('sportsCarAll').style.visibility = 'hide'
        document.getElementById('sportsCarGps').style.visibility = 'hide'
        document.getElementById('sportsCarDisplay').style.visibility = 'hide';
}
else if(document.getElementById('sportsCar').checked && 
document.getElementById('gps').checked){
        document.getElementById('sportsCarGpsAndDisplay').style.visibility = 'hide'
        document.getElementById('sportsCarAll').style.visibility = 'hide'
        document.getElementById('sportsCarGps').style.visibility = 'show'
        document.getElementById('sportsCarDisplay').style.visibility = 'hide';
}
             else if(document.getElementById('sportsCar').checked && 
document.getElementById('display').checked){
    document.getElementById('sportsCarGpsAndDisplay').style.visibility = 'hide'
        document.getElementById('sportsCarAll').style.visibility = 'hide'
        document.getElementById('sportsCarGps').style.visibility = 'hide'
        document.getElementById('sportsCarDisplay').style.visibility = 'show';
}
             else(document.getElementById('sportsCar').checked){
    document.getElementById('sportsCarGpsAndDisplay').style.visibility = 'hide'
        document.getElementById('sportsCarAll').style.visibility = 'show'
        document.getElementById('sportsCarGps').style.visibility = 'hide'
        document.getElementById('sportsCarDisplay').style.visibility = 'hide';
}
}

    </script>

没读过你所有的代码，但这里有一个简单的例子

<html>
    <head>
        <style type="text/css">
            #myData{visibility:hidden;}
        </style>
        <script language="JavaScript">

            function toggleVisibility(eventsender, idOfObjectToToggle){
                var myNewState = "hidden";
                if (eventsender.checked === true){
                    myNewState = "visible";
                }

                document.getElementById(idOfObjectToToggle).style.visibility = myNewState;
            }       
        </script>
    </head>
    <body>
        <input type="checkbox" id="myId" name="myName" onClick = "JavaScript:toggleVisibility(this,'myData');"/>
        <div name="myData" id="myData"> <h1>My Data</h1></div>
    </body>
</html>

我写了一个小例子来切换不同的组合（警告！它只是快速而肮脏）

<html>
<head>
<style type="text/css">
    #myData{visibility:hidden;}
    #myData2{visibility:hidden;}
    #myData3{visibility:hidden;}
</style>
<script language="JavaScript">      

    function evaluateCheckboxState()
    {
        var itemToToggle = 0;
        if (document.getElementById("myId").checked) itemToToggle += 1;
        if (document.getElementById("myId2").checked) itemToToggle += 2;            
        return itemToToggle;
    }

    function toggleVisibility()
    {
        var myNewState = "hidden";
        var itemToShow = evaluateCheckboxState();
        var idToShow = "";
        //hide all divs                     
        document.getElementById("myData").style.visibility = myNewState;
        document.getElementById("myData2").style.visibility = myNewState;
        document.getElementById("myData3").style.visibility = myNewState;
        if (itemToShow === 0) return;

        switch (itemToShow)
        {
            case 1:
                idToShow = "myData";
                break;
            case 2:
                idToShow = "myData2";
                break;
            case 3:
                idToShow = "myData3";
                break;
            default:
                break;  
        }           

        myNewState = "visible";
        document.getElementById(idToShow).style.visibility = myNewState;
    }       
</script>
</head>
<body>
<input type="checkbox" id="myId" name="myName" onClick = "JavaScript:toggleVisibility();"/>
<input type="checkbox" id="myId2" name="myName2" onClick = "JavaScript:toggleVisibility();"/>
 <div name="myData" id="myData"> <h1>My Data1</h1></div>
 <div name="myData2" id="myData2"> <h1>My Data2</h1></div>
 <div name="myData3" id="myData3"> <h1>My Data3</h1></div>
</body>
</html>

链接地址: http://www.djcxy.com/p/56019.html

上一篇: Toggle the visibility of divs based on checkboxes using Javascript

下一篇: jquery bind function have different execute sequence between Firefox and Chrome