如果选中单选按钮显示div

时间：2014-08-24 10:52:15

标签： javascript html radio

我在下面添加了整个代码，但最重要的部分（至少我认为是这样）在下面：

<div id="daysPassed">
<h2>Ile pełnych dni minęło?</h2>
<form id="daysPassedForm">
    <label for="firstDateDP">Data początkowa:</label>
    <input type="text" id="firstDate">
    <fieldset>
        <input type="radio" id="toToday" name="todayOrSelected">    
        <label for="toToday">Do dziś</label>

        <input type="radio" id="toSelected" name="todayOrSelected"> 
        <label for="toSelected">Do wskazanej daty</label> 
        <div id="inputSelectedDiv" class="inputSelectedDiv">
            <p id="inputSelected">(<input type="text" id="selectedEndDate">)</p>
        </div> 

    </fieldset>
    <input type="button" value="Oblicz" id="calculateDifference">
    </form>
</div>

和javascript：

function toggleDateSelection () {
for (i = 0; i <= document.getElementsByName("todayOrSelected").length; i++) {
    if (document.getElementsByName("todayOrSelected")[1].checked) {
        if (document.getElementById("inputSelectedDiv").classList.contains("hidden")) {
            document.getElementById("inputSelectedDiv").classList.remove("hidden");
        }
    } else if (document.getElementsByName("todayOrSelected")[0].checked) {
        document.getElementById("inputSelectedDiv").classList.remove("hidden");
    }
}   
}
document.getElementById("toSelected").addEventListener("click", toggleDateSelection, false);
document.getElementById("toToday").addEventListener("click", toggleDateSelection, false);

我尝试实现的目的是仅在检查输入#toSelected时显示div #inputSelectedDiv ...我做错了什么？

以下是整个HTML：

<!DOCTYPE html>
<html>
<head>
<title>Kalkulator dat</title>
<meta name="description" content="Kalkulator dat. Ile dni minęło od wskazanej daty? Jaka będzie data za daną ilość dni?">
<link rel="StyleSheet" type="text/css" href="style.css">
</head>

<body>
<h1>Kalkulator dat</h1>
<p>Wszystkie daty wprowadzaj w formacie mm/dd/yyyy</p>
<div id="daysPassed">
    <h2>Ile pełnych dni minęło?</h2>
    <form id="daysPassedForm">
        <label for="firstDateDP">Data początkowa:</label>
        <input type="text" id="firstDate">
        <fieldset>
            <input type="radio" id="toToday" name="todayOrSelected">    
            <label for="toToday">Do dziś</label>

            <input type="radio" id="toSelected" name="todayOrSelected"> 
            <label for="toSelected">Do wskazanej daty</label> 
            <div id="inputSelectedDiv" class="inputSelectedDiv">
                <p id="inputSelected">(<input type="text" id="selectedEndDate">)</p>
            </div> 

        </fieldset>
        <input type="button" value="Oblicz" id="calculateDifference">
        </form>
</div>

<div id="daysPassedResult" class="result">
    <p id="daysPassedInfo"></p>
</div>

<div id="dateIndicate">
    <h2>Jaka będzie data?</h2>
    <form id="dateIndicateForm">
        <ul>
            <li>
                <label for="firstDateDI"><span>Data początkowa:</span></label>
                <input type="text" id="firstDateDI">
            </li>

            <li>
            <label for="numberOfDays"><span>Liczba pełnych dni:</span></label>
            <input type="number" id="numberOfDays" step="1">
            </li>

            <li>
            <input type="submit" value="Oblicz">
            </li>
        </ul>
    </form>
</div>

<div id="dateIndicateResult" class="result">
    <p id="dateIndicateResult">Po x dniach od y będzie</p>
</div>

<script src="script.js"></script>
</body>
</html>

和整个JS：

var beginningDateDP;
var dateDifferenceDP;
var todayOrSelected;

function calculateDaysPassed() {
    beginningDateDP = new Date(document.getElementById("firstDate").value);
    var today = new Date();
    dateDifferenceDP = Math.abs(today - beginningDateDP);
    document.getElementById("daysPassedInfo").innerHTML = "Od wskazanej daty do dziś minęło " + Math.floor(dateDifferenceDP / 1000 / 3600 / 24) + " dni.";
    document.getElementById("daysPassedResult").classList.toggle("hidden");
    document.getElementById("daysPassedResult").classList.add("daysPassedResultAppearance");
}

function toggleDateSelection () {
    for (i = 0; i <= document.getElementsByName("todayOrSelected").length; i++) {
        if (document.getElementsByName("todayOrSelected")[1].checked) {
            if (document.getElementById("inputSelectedDiv").classList.contains("hidden")) {
                document.getElementById("inputSelectedDiv").classList.remove("hidden");
            }
        } else if (document.getElementsByName("todayOrSelected")[0].checked) {
            document.getElementById("inputSelectedDiv").classList.remove("hidden");
        }
    }   
}

document.getElementById("calculateDifference").addEventListener("click", calculateDaysPassed, false);
document.getElementById("toSelected").addEventListener("click", toggleDateSelection, false);
document.getElementById("toToday").addEventListener("click", toggleDateSelection, false);

function preparePage() {
//hide all unnecessary elements
    document.getElementById("inputSelectedDiv").classList.toggle("hidden");
    document.getElementById("daysPassedResult").classList.toggle("hidden");
    document.getElementById("dateIndicateResult").classList.toggle("hidden");
}

window.onload = function () {
    preparePage();
};

3 个答案:

答案 0 :(得分：1)

这对你有用。我已经为你更新了HTML和JS。在http://jsfiddle.net/gybwv4r4/1/处尝试（定义的.hidden类只是为了通过添加背景颜色向您展示它的工作原理。您可以将CSS更改为以下内容：）

CSS：

.hidden {
    display:none;
}

HTML：

<div id="daysPassed">
    <h2>Ile pełnych dni minęło?</h2>
    <form id="daysPassedForm">
        <label for="firstDateDP">Data początkowa:</label>
        <input type="text" id="firstDate">
        <fieldset>
            <input type="radio" id="toToday" name="todayOrSelected" />    
            <label for="toToday">Do dziś</label>

            <input type="radio" id="toSelected" name="todayOrSelected" /> 
            <label for="toSelected">Do wskazanej daty</label> 
            <div id="inputSelectedDiv" class="inputSelectedDiv">
                <p id="inputSelected">
                    (<input type="text" id="selectedEndDate" />)
                </p>
            </div>
        </fieldset>
        <input type="button" value="Oblicz" id="calculateDifference" />
    </form>
</div>

JS：

var tos = document.getElementsByName("todayOrSelected");
function toggleDateSelection () {
    var isd = document.getElementById("inputSelectedDiv");
    if (this.id === 'toToday') {
        isd.classList.add('hidden');
    }
    else if (this.id === 'toSelected') {
        isd.classList.remove('hidden');
    }
}
tos[0].addEventListener("click", toggleDateSelection, false);
tos[1].addEventListener("click", toggleDateSelection, false);

答案 1 :(得分：0)

好的，这就是你要找的答案，

<强> HTML 

<div id="daysPassed">
<h2>Ile pełnych dni minęło?</h2>
<form id="daysPassedForm">
    <label for="firstDateDP">Data początkowa:</label>
    <input type="text" id="firstDate">
    <fieldset>
        <input type="radio" id="toToday" name="todayOrSelected">    
        <label for="toToday">Do dziś</label>

        <input type="radio" id="toSelected" name="todayOrSelected"> 
        <label for="toSelected">Do wskazanej daty</label> 
        <div id="inputSelectedDiv" style="display:none;" class="inputSelectedDiv">
            <p id="inputSelected">(<input type="text" id="selectedEndDate">)</p>
        </div> 

    </fieldset>
    <input type="button" value="Oblicz" id="calculateDifference">
    </form>
</div>

<强> JS 

function toggleDateSelection () {
for (i = 0; i <= document.getElementsByName("todayOrSelected").length; i++) {
    if (document.getElementsByName("todayOrSelected")[1].checked) {
        if (document.getElementById("inputSelectedDiv").classList.contains("hidden")) {
            document.getElementById("inputSelectedDiv").classList.remove("hidden");
        }
    } else if (document.getElementsByName("todayOrSelected")[0].checked) {
        document.getElementById("inputSelectedDiv").classList.remove("hidden");
    }
}   
}


document.getElementById('toToday').addEventListener('click',function(e){
    document.getElementById('inputSelectedDiv').style.display = 'block';
});
document.getElementById('toSelected').addEventListener('click',function(e){
    document.getElementById('inputSelectedDiv').style.display = 'block';
});

DEMO

不要忘记接受并投票回答如果有效，它会帮助其他用户。

答案 2 :(得分：0)

请尝试此脚本

<div id="targetedArea" onClick="checkelement()">
 <input id="d" type="radio" />
</div>

<script type="text/javascript">
   function checkelement(){
      var trigerA = document.getElementById("d");
         if(trigerA.checked){
            var targetA = document.getElementById("targetedArea");
            targetA.style.display = 'none';
         }else{
         }
   }
</script>
相关问题
最新问题