Question

在此单击复选框中，未调用脚本中定义的函数并且错误即将到来我能为此做些什么？

<tr>
    <td>Enter Subject:</td>
    <td>
        <input type="checkbox" name="subject" onclick="check();" class="subject" value="maths">
        Maths
        <input type="checkbox" name="subject" onclick="check();" class="subject" value="chemistry">
        Chemistry
    </td>
</tr>
<script>
    function check() { 
        check=true;
    }
</script>`

Answer 1

Checkboxes have a property called checked，允许您返回并设置是否选中复选框。

<tr>
    <td>Enter Subject:</td>
    <td>
        <input type="checkbox" name="subject" class="subject" value="maths">
        Maths
        <input type="checkbox" name="subject" class="subject" value="chemistry">
        Chemistry
    </td>
</tr>
<script>
    // this creates a collection of elements
    const subjectClass = document.getElementsByClassName("subject")

    // adds event listeners to those elements
    for (let i = 0; i < subjectClass.length; i++) {
        subjectClass[i].addEventListener('click', check)
    }

    function check(){
        console.log(`${this.value} is ${this.checked}`)
    }
</script>

每当选中或取消选中复选框时，check()都会在控制台中记录主题名称和布尔值。

例如，＆＃34; maths is true＆＃34; （选中）或＆＃34; maths is false＆＃34; （未选中）。

我使用事件监听器的原因是this最终会代表您与之交互的元素或输入。

this.checked如果选中则返回true，如果未选中则返回false。

Here is a codepen.（确保在左下角打开控制台。）

Answer 2

<tr>
    <td>Enter Subject:</td>
    <td>
        <input type="checkbox" name="subject" onclick="check(this);" class="subject" value="maths">
        Maths
        <input type="checkbox" name="subject" onclick="check(this);" class="subject" value="chemistry">
        Chemistry
    </td>
</tr>
<script>
function check(e) { 
    e.checked=true;
}
</script>

使用接受输入元素作为参数的函数check()的参数（使用this），并将属性checked而不是check设置为true 。 checked表示是否已选中。

未捕获的TypeError：check不是HTMLInputElement.onclick中的函数

2 个答案: