如果未选中另一个复选框，如何返回假并显示警报

Question

我是JavaScript的新手，我对如何启动它感到完全困惑（代码下的更好解释）。

<form>
    <div id="NECESSARY">
        <table id="Table1">
            <tr>
                <td class="name">necessary-a</td>
                <td class="button">
                    <input type="radio" name="necessary" value="uniquename1" /></td>
            </tr>
            <tr>
                <td class="name">necessary-b</td>
                <td class="button">
                    <input type="radio" name="necessary" value="uniquename2" /></td>
            </tr>
        </table>
    </div>

    <div id="group2">
        <table id="Table2">
            <tr>
                <td class="name">group2-a</td>
                <td class="button">
                    <input type="checkbox" name="group2" value="uniquename3" /></td>
            </tr>
            <tr>
                <td class="name">group2-b</td>
                <td class="button">
                    <input type="checkbox" name="group2" value="uniquename4" /></td>
            </tr>
        </table>
    </div>

    <div id="group3">
        <table id="Table3">
            <tr>
                <td class="name">group3-a</td>
                <td class="button">
                    <input type="radio" name="group3" value="uniquename5" /></td>
            </tr>
            <tr>
                <td class="name">group3-b</td>
                <td class="button">
                    <input type="radio" name="group3" value="uniquename6" /></td>
            </tr>
        </table>
    </div>

<div id="canbeselectedwhenever">
    <table id="whenever">
        <tr>
            <td class="name">whenever-a</td>
            <td class="button">
                <input type="checkbox" name="whenever" value="uniquename7" /></td>
        </tr>
        <tr>
            <td class="name">whenever-b</td>
            <td class="button">
                <input type="checkbox" name="whenever" value="uniquename8" /></td>
        </tr>
    </table>
</div>
</form>

因此，如果在从NECESSARY输入之前选择了group1或group2中的复选框/单选按钮，则不会选中该复选框/单选按钮，并且在屏幕上显示警报。 但是，可以选择“无论何时”的输入而无需选择“必要”的输入。

对于这个问题，我们深表歉意，但是我非常感谢您可以提供的任何帮助。 谢谢 ：）

Answer 1

我认为这是一个非常基本的JavaScript问题，或者听起来是这样。 您需要将onClick事件处理程序添加到要检查其是否满足条件的元素上。 然后，您需要学习如何读取元素的值（提示document.getElementById（id）），我想这就是全部。 Google onclick，复选框值和其他条款或阅读w3schools.com

Answer 2

我做了一个小提琴。

小提琴

查找.addEventListener信息。

JavaScript代码：

// get all the input elements
var inputs = document.getElementsByTagName("input");

var temp = [];      // holds the radio/checkboxes
var necessary = []; // holds the necessary elements

for(var i = 0; i < inputs.length; i++){
    if(inputs[i].name !== "necessary")
        temp.push(inputs[i]);
    else
        necessary.push(inputs[i]);
}

inputs = temp.slice(0);  // get a copy of the temp array and store in inputs

for(var i = 0;i < inputs.length; i++){
    // add an event listener which fires the `mouseDown` on 'click'
    if(inputs[i].name !== "whenever")  // `whenever` elements do not undergo checks
         inputs[i].addEventListener("click", mouseDown, false);
}


function mouseDown(checkbox){
    var any_checked = false; // is any radio button checked ?

    for(var i = 0; i < necessary.length; i++){
        if(necessary[i].checked){ // if any is checked 
            any_checked = true;  // any radio is checked = true
            break;              // come out of loop
        }
    }

    if(! any_checked){  /// if nothing is checked
        alert("You left all fields blank.");  // alert user
        for(var i = 0; i < inputs.length; i++){
            inputs[i].checked = false;  // make the checked property false.
        }
    }
}

希望有帮助！