无论输入如何，都显示相同的布尔结果

Question

我正在尝试编写一个简单的脚本，其中有两组单选按钮，分别具有 True 和 False 值。如果两个 True 按钮都被选中，则显示 "true"，如果其中一个按钮为 False，则显示 "false"。不管输入什么，结果总是显示为 "true".

    <p>Select "True" or "False"</p>
    <form>
        <input type="radio" id="true1" name="bool1" value=true><br>
        <label for="true1">True</label><br>
        <input type="radio" id="false1" name="bool1" value=false><br>
        <label for="false1">False</label><br>
    </form>
    <p>Select "True" or "False" again</p>
    <form>
        <input type="radio" id="true2" name="bool2" value=true><br>
        <label for="true2">True</label><br>
        <input type="radio" id="false2" name="bool2" value=false><br>
        <label for="false2">False</label><br>
    </form>
    <input type="button" onclick="and()" value="Submit">
    <p id="and"></p>

<script>
    var radio1;
    var radio2;
    var result;
    function and(){
        try {
            radio1 = document.querySelector('input[name="bool1"]:checked').value;
            radio2 = document.querySelector('input[name="bool2"]:checked').value;
            if (radio1 && radio2)
            {
                document.getElementById("and").innerHTML = "True";
            }
            else
            {
                document.getElementById("and").innerHTML = "False";
            }
        }
        catch {
            alert("Select a checkbox on each form");
        }
    }
</script>

我已经束手无策了。我什至确保通过 if 语句显示 radio1 和 radio2 值，果然，当 radio1 或 radio2 的值为 false 时，它仍会显示 "True"。这怎么可能？

Answer 1

单选按钮值不是布尔值，它们是字符串，非空字符串在 JavaScript 中的计算结果为 true。它们被认为是 truthy 值。

可以使用严格比较：

radio = document.querySelector('input[name="bool1"]:checked').value;

if (radio === 'True') { /* ... */ } else { /* ... */ }

Answer 2

罗比在我整理答案时回答。所以是的，你给了变量字符串值，你的 if 需要比较多个条件：

var radio1;
 var radio2;
 var result;

 function and() {
   try {
     radio1 = document.querySelector('input[name="bool1"]:checked').value;
     radio2 = document.querySelector('input[name="bool2"]:checked').value;
     if ((radio1 == "true") && (radio2 == "true")) {
       document.getElementById("and").innerHTML = "True";
     } else {
       document.getElementById("and").innerHTML = "False";
     }
   } catch (err) {
     alert("Select a checkbox on each form");
   }
 }

jsFiddle

无论输入如何，都显示相同的布尔结果

Same boolean result is displayed no matter the input

html

javascript

boolean-operations