IF ELSE声明与＆amp;＆amp;和||条件

Question

我有一组复选框（id =＆＃34;第一个＆＃34; id =＆＃34;第二个＆＃34;）和主复选框（id =＆＃34; main＆＃34;）。

var twitchStats = {
  '6': { stream: { twitch: [Object] } },
  '7': { stream: { twitch: [Object] } },
  '8': { stream: { twitch: [Object] } },
  '9': { stream: { twitch: [Object] } },
  '10': { stream: { twitch: [Object] } },
  '11': { stream: { twitch: [Object] } }
};

process(twitchStats).then(result => {
    // ...
});

如果选中了一个或多个组复选框，则主要具有不确定条件。如果全部选中，则主复选框也已检查条件。

<input type='checkbox' id="main_button" onclick="Indeterminate()"><label for="main_button">Main checkbox of group</label> 
<input type='checkbox' id="first" onclick="Indeterminate()"><label for="first">First thing</label>
<input type='checkbox' id="second" onclick="Indeterminate()"><label for="second">Second thing</label>

在我的IF ELSE语句中，条件IF和ELSE有效，但ELSE IF有问题。可能做一个简单的错误或？谢谢！

Answer 1

var main = document.getElementById('main_button');
var first = document.getElementById('first');
var second = document.getElementById('second');

function Indeterminate() {
  if (first.checked && second.checked) {
    main.checked = true;
    main.indeterminate = false;
  } else if (first.checked || second.checked)
    main.indeterminate = true;
  else
    main.indeterminate = false;

}

<input type='checkbox' id="main_button" onclick="Indeterminate()">
<label for="main_button">Main checkbox of group</label>
<input type='checkbox' id="first" onclick="Indeterminate()">
<label for="first">First thing</label>
<input type='checkbox' id="second" onclick="Indeterminate()">
<label for="second">Second thing</label>

Answer 2

你的＆amp;＆amp;代码是对的，但它是＆amp;＆amp;情况是你的一部分||代码，所以当||不是真的，＆amp;＆amp;也不会是真的。只需改变他们的顺序。

Answer 3

如前所述，您应该在&&之前移动||。

原因是如果选择第一个或两者都被选中，first.checked || second.checked将始终为真。只有||失败的情况是两者都未选中，然后&&也会失败。

JSFiddle

更新代码

＆＃13;

＆＃13;

function Indeterminate() {
  var first = document.getElementById('first').checked;
  var second = document.getElementById('second').checked
  var main = document.getElementById('main_button');
  if (first && second) {
    main.indeterminate = false;
    main.checked = true
  } else {
    main.checked = main.indeterminate = first || second
  }
}

＆＃13;

<input type='checkbox' id="main_button" onclick="Indeterminate()">
<label for="main_button">Main checkbox of group</label>
<br>
<input type='checkbox' id="first" onclick="Indeterminate()">
<label for="first">First thing</label>
<br>
<input type='checkbox' id="second" onclick="Indeterminate()">
<label for="second">Second thing</label>

＆＃13;

＆＃13;

＆＃13;

由Bekim Bacaj评论，我已更新了我的代码。 JSFiddle

Answer 4

我认为问题是你得到||错误的含义。这意味着or左右表达式为真 - 或两者！

因此，您的else if永远不会被调用，因为如果a.checked && b.checked为真，那么a.checked || b.checked也将一直为真，if将在之前执行else if甚至被检查。

因此，正确的解决方案是：

function Indeterminate() {
    if (document.getElementById('first').checked && document.getElementById('second').checked) {
        document.getElementById('main_button').checked;
    } else if (document.getElementById('first').checked || document.getElementById('second').checked) {
        document.getElementById('main_button').indeterminate = true;
    } else { 
        document.getElementById('main_button').indeterminate = false; 
    }    
}

在这里，您首先检查更具体的条件a.checked && b.checked。只有当该条件不成立时，才会评估较弱的条件a.checked || b.checked。