How to return false and show alert IF another checkbox hasn't been selected

Question

I'm completely new to JavaScript and I'm completely stumped as to how to start this (better explanation beneath the code).

<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>

so if a checkbox/radio button from group1 or group2 is selected before an input from NECESSARY, the checkbox/radio button won't be selected, and will show an alert on the screen. however, an input from "whenever" can be selected without requiring an input from "necessary" to be selected.

sorry for the question, but I'm really incredibly appreciative of any help that can be given. thank you :)

If you aren't sure where to start, this may be a good place: [CodeAcademy](http://www.codecademy.com/tracks/javascript). — Scampbell, Mar 01 '14 at 05:31
hi there :) i haven't looked at jquery at all yet - i'm planning to, but unfortunately i'm on a deadline. @scampbell, thank you for the advice :) i actually already am trying to learn javascript through ca, but i'm not quick enough to advance through and be able to figure it out before the deadline - i will continue using codeacademy afterwards though, because it is a good site. probably to learn jquery, haha — user3367370, Mar 01 '14 at 06:18

score 0 · Answer 1 · answered Mar 01 '14 at 05:35

0

I think it's a very basic javascript question or so it sounds. You need to add onClick event handler to the element on selection of which you want to check that if condition. Then you need to learn how to read the value of an element (hint document.getElementById(id)) and I guess thats all. Google onclick, checkbox value and other terms or read w3schools.com

answered Mar 01 '14 at 05:35

TechMaze

477
2
9

i thought something similar too, but i'm not familiar enough to know where to begin, unfortunately :\ but i'll try again and look those up. thank you :) – user3367370 Mar 01 '14 at 06:18
actually, do you know if there's a way to reference all "onClick" events in js, and then run an if/then/else method? or would i add an "onClick" event for each input item in html? – user3367370 Mar 01 '14 at 06:21
http://stackoverflow.com/questions/5412234/how-to-hook-into-the-page-wide-click-event – TechMaze Mar 01 '14 at 06:44
@TechMaze I suppose OP is asking for *each input element* and not the whole page. – HighBoots Mar 01 '14 at 06:45
@user3367370 You can do it with a for-loop as in my answer. – HighBoots Mar 01 '14 at 06:46
sorry, i forgot to mention: there is also a group of inputs that can be selected irrespective of whether an input from "necessary" is. i'll edit the question now -> – user3367370 Mar 01 '14 at 07:22

HighBoots · Accepted Answer · 2014-03-01T07:51:59.623

I made a fiddle.

`FIDDLE`

Find .addEventListener info.

Javascript Code:

// 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.
        }
    }
}

Hope that helps!

thank you very much! is it possible to, if it does cause an alert, leave the checkbox/radio button unselected? currently, it's still selected after the alert. but this is really close to what i had in mind, so thank you again :) — user3367370, Mar 01 '14 at 07:20
@user3367370 Done. And if my answer helped, could you please accept it by clicking the green tick mark. Thanks :) — HighBoots, Mar 01 '14 at 07:34
thank you for all the help so far :) if you had any extra time, do you know how i'd be able to make some input groups exempt from the alert? i.e. the input group "whenever" that i added to my html. if not, thank you very much anyway — user3367370, Mar 01 '14 at 07:43

How to return false and show alert IF another checkbox hasn't been selected

2 Answers2

FIDDLE

Javascript Code:

`FIDDLE`