JavaScript 和复选框不起作用答案

【问题标题】：JavaScript and Check Boxes not workingJavaScript 和复选框不起作用
【发布时间】：2015-08-20 06:19:31
【问题描述】：

基本上，我正在尝试用 HTML 制作一个表单，该表单使用 JavaScript 从复选框中获取输入，并根据选中的框打开我网站上的特定页面。

当我选中一个框或不选中一个或更多框时，它只会通过发出警报来响应，请选中一个框。有人知道我缺少什么吗？这是目前我在尝试多种不同方式后编写代码的方式。另请注意，我尝试打开的指定窗口位于同一文件夹中的 html 页面。

JavaScript：

function checking()
{
    var frm = document.diaglab;
    var majdep1 = document.getElementById("majdep").checked;
    var bipolar1 = document.getElementsByName("bipolar").checked;

    if(majdep1.checked == true && bipolar1.checked == true)
    {
        window.alert("possible bipolar disorder");
        window.open("bipolar1.html");
    }else{
        window.alert("please check boxes");
    }
}

HTML 代码：

<!DOCTYPE HTML> 
<html>
<head>
<title></title>
<meta name="" content="">
<link href="illness.css" rel="stylesheet">
<script type="text/javascript" src="checked.js"></script>


</head>
<body>
<div id="container">
<div >
    <h1 id="mainhead">Exploring Symptoms</h1>
</div>
<div>
    <article ><p>This exploring area is just a lab tool that allows you too explore how mental illness is diagnosed<br />
    according to the DSM V. You can click on certain symptoms and see what diagnoses may be applied. It<br />
    is important to know that this is not an actual diagnosis tool and should not be applied to your life in any<br />
    way as to self diagnose, treat or medicate yourself or anyone else. If you feel that you may be suffering<br />
    from a mental illness contact your physician! Also note that this tool is not all inclusive and if you want<br />
     a deeper understanding please refer to the DSM V.</p></article>
</div>
<hr>

<div id="explrfrm">
    <form name="diaglab"  method="post" onsubmit="return checking()">
    <label id="explrlab">Depressive and Manic Symptoms</label><br />
    <span id="explrlab1">
        <label id= title="Symptom1" >1. Depressed mood (sad, empty, hopeless)most of the day, nearly everyday.</label> <input type="checkbox" name="majdep" id="majdep" ><br /><br />
        <label  title="Symptom2">2. Diminished interest or pleasure in all or nearly all activities</label> <input type="checkbox" name="majdep" id="majdep"><br /><br />
        <label  title="Symptom3">3. Significant weight loss or gain (without dieting) or decreased appetite most days.</label> <input type="checkbox" name="majdep" id="majdep"><br /><br />
        <label  title="Symptom4">4. Insomnia (inability to sleep) or Hypersomnia (sleeping too much) nearly everyday</label> <input type="checkbox" name="majdep" id="majdep"><br /><br />
        <label title="Symptom5">5. Fatigue or loss of energy almost everyday</label> <input type="checkbox" name="majdep" id="majdep"><br /><br />
        <label  title="Symptom6">6. Feelings of worthlessness or excessive and inappropriate guilt.</label> <input type="checkbox" name="majdep" is="majdep"><br /><br />
        <label  title="Symptom7">7. Diminished ability to think, concentrate, or indecisiveness.</label> <input type="checkbox" name="majdep" id="majdep"><br /><br />
        <label  title="Symptom8">8. Recurrent thoughts of death, suicidal ideations with or without a plan and or attempt.</label> <input type="checkbox" name="majdep" id="majdep"><br /><br />
        <label  title="Symptom9">9. significant impairment  in social , occupational, or other important areas of functioning</label> <input type="checkbox" name="majdep" id="majdep"><br /><br />
        <label title="Symptom10">10. Distinct period of abnormally or persistent elevated, expansive, or irritable mood and increased goal directed energy for at least one week all day or nearly all day</label> <input type="checkbox" name="bipolar" id="bipolar"><br /><br />
        <label  title="Symptom11">11. During the period of increased mood energy at least three of the following: inflated self esteem, dcreased need for sleep, extreme talkitivity, flight of ideas,distractibility, increased goal directed activity, or excessive activity involvement nearly everyday.</label> <input type="checkbox" name="bipolar" id="bipolar"><br />
        </span>

        <input type="submit" value="submit">
        <input type="reset" value="Reset">


    </form>

</div>



</div>

</body>
</html>

【问题讨论】：

请正确格式化您的代码并检查控制台吗？ 提示： document.getElementsByName 返回一个 array。
看起来您只是从按钮打开页面window.open，那为什么是提交？另外，如果我选中多个框怎么办？我一般对这个界面感到困惑。您应该制作一个 jsfiddle 并具体说明您期望的行为。
您的页面上只能有一个真正的id="majdep"，在大多数浏览器中它是第一个，但之后的任何内容都不会包含在内。
var majdep1 = document.getElementById("majdep").checked; 稍后您执行 majdep1.checked -- 您需要从其中任何一个中删除 checked 部分。现在你实际上在做document.getElementById("majdep").checked.checked。
您有太多 id=majdep 的对象，页面中每个对象的 id 应该是唯一的，进行更正然后检查

标签： javascript checkbox

【解决方案1】：

你的代码有错误

您在定义变量时引用了.checked，并在执行 if 语句时再次引用。

以下应该可以工作

function checking()
{
    var frm = document.diaglab;
    // This is incorrect! You have .checked at the end!
    //var majdep1 = document.getElementById("majdep").checked;
    //var bipolar1 = document.getElementsByName("bipolar").checked;
    var majdep1 = document.getElementById("majdep");
    var bipolar1 = document.getElementsById("bipolar");

    if(majdep1.checked == true && bipolar1.checked == true)
    {
        window.alert("possible bipolar disorder");
        window.open("bipolar1.html");
    }else{
        window.alert("please check boxes");
    }
}

【讨论】：

我从变量中删除了 .checked 但脚本的行为没有改变。我还将 var bipolar1 更改为 document.getElementById 而不是 ByName。
实际上猜猜你是什么major-mann，因为现在它在我将第二个变量更改为 ById 并删除 .checked 后工作。一定要花一秒钟才能真正认识到这种变化。谢谢你的帮助。如果我想将代码作为 getElementsByName 执行，我可以问你另一个问题吗？javascript 中数组的正确格式是什么？如果我问的有道理。我之前使用 for 循环和 if 语句尝试过这种方式，但它不起作用。
我更新了我的代码来解决这个问题；）首先，您会遇到问题，因为您有多个具有相同 ID 的 HTML 元素。你需要解决这个问题。至于 getElementsByName，它返回一个 DOM 元素的 NodeList。您可以通过执行 for 循环 for (var i=0; i<elements.length; i++) { console.log(elements[i]); } 来获取各个元素
非常感谢，我会尝试一下。如果我没有得到我正在寻找的确切行为，我会尝试使用我当前的格式嵌套 if 语句。
@ThornPhillips np。很高兴为您提供帮助！