Question

我有九个复选框链接到九个图像，其中三个使用名称＆＃39;正确＆＃39;使用下面显示的代码。

<div class="nine">
            <label for="correct1"><img class="picture1" src="picture1.jpg"/></label>
            <input type="checkbox" class="chk" id="correct1" name="correct"/>
            </div>

其余六个未使用下面显示的代码命名。

<div class="nine">
            <label for="incorrect1"><img class="picture4" src="picture4.jpg"/></label>
            <input type="checkbox" class="chk" id="incorrect4"/>
            </div>

我目前有以下代码来生成警报，如果三个复选框的名称为＆＃34;更正＆＃34;已经过检查但是它没有工作。

<script>
var i, correct = document.getElementsByName('correct');
            for (i = 0; i <= correct.length; i++) {
                if (correct[i].checked) {
                    alert('correct');
                    return true;
                }
            }
            alert('incorrect');
            return false;
            </script>

任何人都可以帮我吗？

Answer 1

遍历所有复选框，检查其状态。完成此操作后，创建一个变量“correct”并将其初始化为true。然后转到变量中的每个状态，如果发现它的名称不是“正确”并且检查它或其名称是“正确”且不正确，则将变量设置为false。然后检查变量是否为真，如果是，则显示警报。

在此处查看示例：https://repl.it/GxsE/9

Answer 2

使用ES6：

const correctInputs = [...document.querySelectorAll('input[name="correct"]')];

const alertIfThree = () => {
  const checkedCorrectInputs = correctInputs.filter(input => input.checked);
  if (checkedCorrectInputs.length > 2) {
    alert('Alert');
  }
};

correctInputs.forEach(input => input.addEventListener('click', alertIfThree));

<input type="checkbox" name="correct"/>
<input type="checkbox" name="correct"/>
<input type="checkbox" name="correct"/>
<input type="checkbox" name="correct"/>
<input type="checkbox" name="correct"/>

document.querySelectorAll('input[name="correct"]')获取名称为“correct”的所有输入。
[...CODE]是spread operator，它会将代码从上一个点转换为数组。
correctInputs.forEach(input => input.addEventListener('click', alertIfThree))为每个人添加了点击事件监听器。该事件监听器是函数alertIfThree()。
alertIfThree()过滤掉那些未经检查的输入元素，如果有超过2个，则会产生警报。

修改

回应你的评论：

// jshint esnext: true

const inputs = [...document.querySelectorAll('input[name="correct"], input[name="incorrect"]')];

const alertIfCorrect = () => {
  const checkedInputs            = inputs.filter(input => input.checked),
        noIncorrectCheckedInputs = checkedInputs.find(input => input.name === 'incorrect') === undefined;
  if (checkedInputs.length > 2 && noIncorrectCheckedInputs) {
    alert('Alert');
  }
};

inputs.forEach(input => input.addEventListener('click', alertIfCorrect));

<p>Correct:
  <input type="checkbox" name="correct"/>
  <input type="checkbox" name="correct"/>
  <input type="checkbox" name="correct"/>
  <input type="checkbox" name="correct"/>
  <input type="checkbox" name="correct"/>
</p>
<p>Incorrect:
  <input type="checkbox" name="incorrect"/>
  <input type="checkbox" name="incorrect"/>
  <input type="checkbox" name="incorrect"/>
</p>

const是ES6 constant。 “常量的值不能通过重新分配而改变，并且不能重新声明”。
[...CODE_HERE]被称为spread syntax。在这里，它将省略后的内容转换为数组。其他方法是使用Array.from()。
() => {和input => CODE_HERE为arrow functions。它们是ES6用于功能声明的语法糖。

=>之前的参数是参数。 ()代表0个参数。如果你想要几乎没有参数的函数，那些大括号需要在它们里面包含那么少的参数。对于一个参数，参数的名称可以完全替换括号（如此项目符号中的第二个代码）。

=>之后的内容是表达式或语句组。语句由大括号括起（{}）。如果省略它们，则表示您正在编写一个函数将返回的表达式。例如，input => input.checked相当于function(input) { return input.checked; }。
filter()和find()是数组原型的方法。它们分别使用在作为参数传递给它们的函数中定义的条件来过滤和搜索数组。请按照这两个链接阅读更多内容。

如果您需要其他解释，请告诉我。这里的功能和结构非常新鲜，所以你可能还不知道它们。

Answer 3

我把它放在JSfiddle中，它对我有用。我只是将JS包装在一个函数中并添加了一个onclick事件。

  <div class="nine">
            <label for="correct1"><img class="picture1" src="picture1.jpg"/></label>
            <input type="checkbox" class="chk" id="correct1" name="correct"onclick="validate()"/>
</div>


<div class="nine">
            <label for="incorrect1"><img class="picture4" src="picture4.jpg"/></label>
            <input type="checkbox" class="chk" id="incorrect4" onclick="validate()"/>
 </div>


    <script type=text/javascript">
    function validate()
    {
    var i, correct = document.getElementsByName('correct');
                for (i = 0; i <= correct.length; i++) {
                    if (correct[i].checked) {
                        alert('correct');
                        return true;
                    }
                }
                alert('incorrect');
                return false;
    }

    </script>

Answer 4

检查循环。使用for (i = 0; i < correct.length; i++) {代替for (i = 0; i <= correct.length; i++) {

＆＃13;

var i, correct = document.getElementsByName('correct');
var correct_answers = [];
function validate(){
    correct_answers = [];
    for (i = 0; i < correct.length; i++) {
        var element = correct[i].getAttribute("id");
        var checked = correct[i].checked;
        correct_answers.push({element,checked});
    }
}

function show(){
  document.getElementById('results').innerHTML ="";
  for(var e=0;e<correct_answers.length;e++){
    var box = document.createElement('div');
box.innerHTML = correct_answers[e].element+ " " + correct_answers[e].checked+ "<br>";

    document.getElementById('results').appendChild(box);
  }
  
}

＆＃13;

<div class="nine">
            <label for="correct1"><img class="picture1" src="picture1.jpg"/></label>
            <input type="checkbox" onclick="validate()" class="chk" id="correct1" name="correct"/>
            </div>
            
            <div class="nine">
            <label for="correct2"><img class="picture1" src="picture1.jpg"/></label>
            <input type="checkbox" onclick="validate()" class="chk" id="correct2" name="correct"/>
            </div>
            
            <div class="nine">
            <label for="correct3"><img class="picture1" src="picture1.jpg"/></label>
            <input type="checkbox" onclick="validate()" class="chk" id="correct3" name="correct"/>
            </div>
            <div class="nine">
            <label for="incorrect1"><img class="picture4" src="picture4.jpg"/></label>
            <input type="checkbox" onclick="validate()" class="chk" id="incorrect4"/>
            </div>
            <div class="nine">
            <label for="incorrect1"><img class="picture4" src="picture4.jpg"/></label>
            <input type="checkbox" onclick="validate()" class="chk" id="incorrect5"/>
            </div>
            <div class="nine">
            <label for="incorrect1"><img class="picture4" src="picture4.jpg"/></label>
            <input type="checkbox" onclick="validate()" class="chk" id="incorrect6"/>
            </div>
            <div class="nine">
            <label for="incorrect1"><img class="picture4" src="picture4.jpg"/></label>
            <input type="checkbox" onclick="validate()" class="chk" id="incorrect7"/>
            </div>
            <div class="nine">
            <label for="incorrect1"><img class="picture4" src="picture4.jpg"/></label>
            <input type="checkbox" onclick="validate()" class="chk" id="incorrect8"/>
            </div>
            
            <button onclick="show();">show results</button>
            <div id="results"></div>

＆＃13;

Answer 5

这将需要一些JavaScript。每次更改时，您都需要选中复选框。所以首先，你需要检查你的复选框，假设他们有一个指定的'chk'类。这可以使用querySelector完成。

每次复选框更改时，都会调用函数'check_checkboxes（）'。如果选中name='correct'，则此功能将查看每个复选框，然后递增'count'

var checkboxes = document.querySelectorAll(".chk");

var correct = document.querySelectorAll("[name=correct]");

function check_checkbox() {
  var count = 0;
  [].forEach.call(correct, function(item) {
    if (item.checked) {
      count++;
    }
  });
  

  if (count >= 3) {
    alert("count of 3 or more");
  }
}

[].forEach.call(checkboxes, function(item) {
  item.addEventListener("change", function() {
    check_checkbox();
  }, false);
});

<div class="nine">
  <label for="correct1"><img class="picture1" src="http://placehold.it/40x40"/></label>
  <input type="checkbox" class="chk" id="correct1" name="correct" />
</div>

<div class="nine">
  <label for="incorrect1"><img class="picture4" src="http://placehold.it/40x40"/></label>
  <input type="checkbox" class="chk" id="incorrect4" />
</div>
<div class="nine">
  <label for="incorrect1"><img class="picture4" src="http://placehold.it/40x40"/></label>
  <input type="checkbox" class="chk" id="incorrect4" name="correct" />
</div>
<div class="nine">
  <label for="incorrect1"><img class="picture4" src="http://placehold.it/40x40"/></label>
  <input type="checkbox" class="chk" id="incorrect4" />
</div>
<div class="nine">
  <label for="incorrect1"><img class="picture4" src="http://placehold.it/40x40"/></label>
  <input type="checkbox" class="chk" id="incorrect4" name="correct" />
</div>

Answer 6

在您的代码中使用document.querySelectorAll（＆＃39;输入[name] = correct＆＃39;）。

如果选中九个复选框中的三个，我该如何生成警报？

6 个答案:

修改