Question

美好的一天，

我正在为一个有趣的小方项目工作，为我自学JavaScript和解决我对古老的俗气科幻电影的热爱（神的村庄，他们！，狼蛛，50英尺女人的攻击），令人难以置信的缩小的人，神奇的航程，八条腿的怪胎）。我想制作一个程序，让你输入一些基本的统计数据，然后按一个按钮来显示理论上这个人在比例上的比例。

那说我还在嘲笑这个项目，并且想要获得一些基本的功能。我想提一个选项，在单选按钮切换文本/选择字段将是可见的或不可见的。我完全不知道如何在点击单选按钮上隐藏字段。我知道我需要标题中的JavaScript来管理隐藏字段的函数。我也在玩弄整个桌子行消失并根据需要重新出现。

我看过Show/hide drop down when radio button is selected。我理解标题正在做什么，但我不知道如何将它实现到我的部分，在这个例子中的头发。是否有更好的方法试图隐藏第一次编码器的价值？并提前感谢您提供的任何帮助。

- Edit--
感谢大家的帮助，我无法在工作中编辑代码，我已经使用我使用的解决方案更新，以便Div将包含在代码中。很抱歉忘了早些时候。

<html>
<head>
    <title>Size Converter</title>
<script language="javascript" type="text/javascript">
function setVisible(id, visible) {
var o = document.getElementById(id); //get the element based on it's id

//if the element exists then set it's visiblity
if (isElement(o)) {
    o.style.visibility = visible ? 'visible' : 'hidden';
} else {
    alert("Element with id '" + id + "' not found.");
}
}
function setDisplay(id, visible) {
var o = document.getElementById(id);
if (isElement(o)) {
    o.style.display = visible ? 'block' : 'none';
} else {
    alert("Element with id '" + id + "' not found.");
}
}
function isElement(obj) {
var returnValue = false;
if (obj == undefined || obj == null) {
    returnValue = false;
} else {
    returnValue = true;
}
return returnValue;
}
</script>
</head>
<style>
BODY {
background-color: #dbdbdb;
}
#Subject, #CG {
border: solid 1px #000000;
padding: 2px;
}
</style>
<br>
<h1><center>Pre Transformation</center></h1>
<center><form>
<table border="0" cellpadding="0" cellspacing="0" style="width:100%">
<tbody>
    <tr>
        <td style="width:50%">
            <h3>
                Subject</h3>
        </td>
        <td>
            &nbsp;</td>
        <td style="width:50%">
            <h3>
                Control Group</h3>
        </td>
    </tr>
    <tr>
        <td>
        <div>
        Sex: <input type='radio' name='subjectsex' value='male' onclick="setVisible('Subject', false);" />Male
             <input type='radio' name='subjectsex' value='female' onclick="setVisible('Subject', true);" />Female
        </div></td>
        <td>
            &nbsp;</td>
        <td>
            <div>
        Sex: <input type='radio' name='CGsex' value='male' onclick="setVisible('CG', false);" />Male
             <input type='radio' name='CGsex' value='female' onclick="setVisible('CG', true);" />Female
        </div></td>
    </tr>
    <tr>
        <td>
            Height:&nbsp;<input size="2" value="5" type="text" />&nbsp;Feet&nbsp;<input size="2" value="6" type="text" />Inches</td>
        <td>
            &nbsp;</td>
        <td>
            Height:&nbsp;<input size="2" value="5" type="text" />&nbsp;Feet&nbsp;<input size="2" value="6" type="text" />Inches</td>
    </tr>
    <tr>
        <td>
            Weight:&nbsp;<input size="2" value="130" type="text" />&nbsp;pounds</td>
        <td>
            &nbsp;</td>
        <td>
            Weight:&nbsp;<input size="2" value="130" type="text" />&nbsp;pounds</td>
    </tr>
    <tr>
        <td>
            Measurements:&nbsp;<input size="2" type="text" />&nbsp;bust/chest&nbsp;<input size="2" type="text" />&nbsp;hips&nbsp;<input size="2" type="text" />waist</td>
        <td>
            &nbsp;</td>
        <td>
            Measurements:&nbsp;<input size="2" type="text" />&nbsp;bust/chest&nbsp;<input size="2" type="text" />&nbsp;hips&nbsp;<input size="2" type="text" />waist</td>
    </tr>
    <tr>
        <td> <div id="Subject">
            Hair Length:&nbsp;<select name="hair">
            <option value=".5">Short/Pixie</option>
            <option value="1.0">Medium/Shoulder</option>
            <option value="1.5"selected="selected">Mid Back</option>
            <option value="2.0" >Waist Length</option></select></div></td>
        <td>
            &nbsp;</td>
        <td><div id="CG">
            Hair Length:&nbsp;<select name="hair">
            <option value=".5">Short/Pixie</option>
            <option value="1.0">Medium/Shoulder</option>
            <option value="1.5"selected="selected">Mid Back</option>
            <option value="2.0" >Waist Length</option></select></div></td>
    </tr>
    <tr>
        <td>
            Leg Percent:&nbsp;<input size="2" type="text" /></td>
        <td>
            &nbsp;</td>
        <td>
            Leg Percent:&nbsp;<input size="2" type="text" /></td>
    </tr>
</tbody>
</table>
<hr>
<p style="text-align: center;">
<input size="2" type="text" />Feet&nbsp;<input size="2" type="text" />&nbsp;inches</p>
<p style="text-align: center;">
<input type="button" value="Transform!" /></p>

<hr>
<h1><center>Post Transformation</center></h1>
<table border="0" cellpadding="0" cellspacing="0" style="width:100%">
<tbody>
    <tr>
<td style="width:50%">
            <h3>
                Subject</h3>
        </td>
        <td>
            &nbsp;</td>
        <td style="width:50%">
            <h3>
                Control Group</h3>
        </td>
    </tr>
    <tr>
        <td>
            </td>
        <td>
            &nbsp;</td>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            &nbsp;</td>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            &nbsp;</td>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            &nbsp;</td>
        <td>
        </td>
    </tr>
    <tr>
        <td>
</td>
        <td>
            &nbsp;</td>
        <td>
</td>
    </tr>
</tbody>
</table>
</body>
</html>

Answer 1

最佳实践是jQuery on change function，你可以监听change事件并查看是否选中了复选框以根据响应进行操作

$(".checkbox").change(function() {
    if(this.checked) {
        $("#myelement").fadeIn();
    } else {
        $("#myelement").fadeOut();
    }
});

Answer 2

除了这个主要错误之外，它几乎正常工作：没有显示Div1和Div2 。请在此处查看fiddle。

刚刚添加

   <div id="Div1">This is div 1 </div>
    <div id="Div2">This is div 2 </div>

代码

Answer 3

有些事情，首先我清理了你的JS并在方法中封装了你的空检查。我还添加了丢失的标记元素，我认为这些元素在你的OP中被忽略了。

这是一个小提琴：http://jsfiddle.net/gev4kwnf/5/

JavaScript现在看起来像这样：

function setVisible(id, visible) {
    var o = document.getElementById(id); //get the element based on it's id

    //if the element exists then set it's visiblity
    if (isElement(o)) {
        o.style.visibility = visible ? 'visible' : 'hidden';
    } else {
        alert("Element with id '" + id + "' not found.");
    }
}

function setDisplay(id, visible) {
    var o = document.getElementById(id);
    if (isElement(o)) {
        o.style.display = visible ? 'block' : 'none';
    } else {
        alert("Element with id '" + id + "' not found.");
    }
}

function isElement(obj) {
    var returnValue = false;
    if (obj == undefined || obj == null) {
        returnValue = false;
    } else {
        returnValue = true;
    }
    return returnValue;
}

Answer 4

如果您想要无库存的事件，有很多方法可以做到这一点（假设您的元素中包含ID“Div1”和“Div2”）。

这是一个。它演示了一种比getElementByID更好的方法来查找DOM元素：

var subMale   = document.querySelector('input[name=subjectsex][value=male]'),
    subFemale = document.querySelector('input[name=subjectsex][value=female]'),
    cgMale    = document.querySelector('input[name=CGsex][value=male]'),
    chFemale  = document.querySelector('input[name=CGsex][value=female]'),
    maleDivChange = function() {
        setVisible('Div1', true); 
        setVisible('Div2', false);
    },
    femaleDivChange = function() {
        setVisible('Div1', false); 
        setVisible('Div2', true);
    };

subMale.addEventListener('click', maleDivChange);
subFemale.addEventListener('click', femaleDivChange);
cgMale.addEventListener('click', maleDivChange);
chFemale.addEventListener('click', femaleDivChange);

这适用于现代浏览器，包括IE9。如果你想早点去做，还有一些额外的工作要做。

它有相当多的问题（例如，如果Div1和Div2实际上在主题组和对照组之间共享，点击主题男性，CG女性，然后点击主题男性再次将使“Div1”可见并且“Div2”不可见。此外，它是相当蛮力的，并且不会扩展。如果它是我实际在做的事情，我可能会通过添加和删除CSS类来进行可见性更改来自“Div1”和“Div2”元素（我可能会为每个发现标记一些其他CSS类，如果我找到任何其他与性别相关的字段，这也会使解决方案可扩展。

以下是包含上述代码的fiddle。

Javascript隐藏功能

4 个答案: