0

Basically, i have a form which includes multiple options, each of these options filter the result until you have a specific outcome, it uses javascript to do this.

My question is that i have a part in the form with multiple check boxes, and what i want to do is to check if each one is checked and display some data when they are checked. But with more than one being able to be checked.

I cant use any sort of framework so please dont suggest that, and i dont want any big blocks of code (only well explained code), i need this to be explained to me and then i can write my own code (so i can learn), i just dont have any idea how to go about this.

Any explanation of the Javascript needed would be helpful.

EDIT: This is the code i have so far:

function jobs() {
    var shownursing = document.getElementById('nursing-block');

    if (document.getElementsByName("nursing")[0].checked) {
        console.log("hi")
        shownursing.style.display = 'block';
        return true;
    } else { 
        console.log("no")
        shownursing.style.display = 'none';
        return false;
    }
}

jobs();
Jeffrey Blake
  • 9,659
  • 6
  • 43
  • 65
adamalexanderw
  • 1,143
  • 2
  • 15
  • 28
  • Event handlers - 'change'. – raina77ow Mar 20 '13 at 13:39
  • You say you "dont want any code" but javascript IS code - so code without code? Or could you rephrase to "only well explained code" perhaps? – Mark Schultheiss Mar 20 '13 at 13:40
  • Try adding event handlers to the checkboxes as : `` Also you could get to know whether the box is checked or not using javascript as: `document.getElementById('box').checked` – Ezhil V Mar 20 '13 at 13:40
  • 1
    @raina77ow You should use the `click` event for checkboxes/radio buttons – Ian Mar 20 '13 at 13:44
  • 1
    @raina77ow http://stackoverflow.com/questions/3117716/onchange-onclick-in-a-checkbox-doesnt-work-in-ie and several other sources – Ian Mar 20 '13 at 13:56
  • Im more trying to understand the best way to go about using a loop to check multiple ones? – adamalexanderw Mar 20 '13 at 13:57
  • @Ian Sorry, not convinced. Author of [this article](http://sleeplesscoding.blogspot.com/2010/01/fixing-ie-onchange-event-for-checkboxes.html) does the only right thing - fixes the browser's behaviour where it's not so trivial (but actually corresponds to the standard). – raina77ow Mar 20 '13 at 14:04
  • @raina77ow That's fine, you can have whatever behavior you want. Most developers want to know exactly when a checkbox is accessed. That would be the `click` event, as the `change` event isn't consistent. So I'm pretty sure the majority of people are looking to use the `click` event when they're talking about detecting a checkbox "changing". Clicking a checkbox changes its state, so just use the `click` event. The article you posted is silly - it relies on jQuery, it uses browser sniffing, doesn't work for dynamic elements, and isn't guaranteed (order of events may not always be correct). – Ian Mar 20 '13 at 14:31
  • @Ian Unfortunately, it's not so simple when you work with `uniform` or some other decorating libraries: I got a lot of strange bugs with handling `click`; handling `change` was much more straightforward (both on radios and simple checkboxes). That's why I reacted on 'should' in your comment: it's a bit too... strong of a statement. ) – raina77ow Mar 20 '13 at 15:41
  • @raina77ow Hmm that's very true, I guess I shouldn't have said "should", just should've suggested it and explained it better :) – Ian Mar 20 '13 at 17:29

1 Answers1

1

Basically, you are wanting to cause some functionality to occur when the checkboxes are checked, right? Your best bet for this is to write a function (or set of functions) to call when the checkboxes are checked. That function will decide what to show in response to the checkboxes.

I think the key difference you need from the code you have already is that you need to attach the function call to the action of the checkbox being checked. To attach a function in this way without using jQuery or any other framework, you can include the onClick attribute in the html of the checkbox:

<input type="checkbox" id="ch1" onclick="jobs();" />

Alternatively, if you are wanting the function to execute when you click a button, you could attach it to the onclick of that button. Or if you are wanting it to execute when the page loads, you can do so by including the following code outside of the function:

window.onload=jobs;

You can also do a combination of the above to have the function execute when the page loads AND when you click a checkbox or button.

Within jobs(), you can check the value of your checkboxes through accessing the DOM element and getting the .checked property. Note that it's much better practice to have an individual id for each checkbox, and to check it that way (you'll have far less bugs in the long run than you get through using an array resulting from document.getElementsByName():

if (document.getElementById("ch1").checked)
{
   //take actions related to this checkbox being checked
}

Since you have multiple checkboxes to check, you would have several such if statements (assuming they are independent). If they need to be processed as a unit (i.e. having two checkboxes checked does something different than just the combination of what having each one individually checked does), then you could set some control variables inside those if statements, and then use a switch statement at the end to control the final execution.

Jeffrey Blake
  • 9,659
  • 6
  • 43
  • 65
  • But doesnt this only run the function if the checkbox is clicked on? if not it will never be run? – adamalexanderw Mar 20 '13 at 14:38
  • Yes, this would run the function when the checkbox is clicked on. When are you wanting the function to run? – Jeffrey Blake Mar 20 '13 at 14:40
  • See my edit - I included some alternate ways to execute the function at times other than when the checkbox is checked. – Jeffrey Blake Mar 20 '13 at 14:46
  • Thanks you have been a great help so far, but my javascript is an external file, so i get a reference error saying hasn't been defined? – adamalexanderw Mar 20 '13 at 14:52
  • You need to make sure that the call to `window.onload=jobs;` occurs after your function definition is loaded. That means that if you put it in your external file, it needs to be at the end. And if you put it in your html as a separate script tag, it needs to be AFTER your script tag that loads the external file. – Jeffrey Blake Mar 20 '13 at 14:56
  • Thanks a lot, it works and i have the hang of it, is using multiple statements to check each box the best way though? – adamalexanderw Mar 20 '13 at 15:10
  • The answer to that question is going to depend a lot on the details of how your code and application is structured. In some cases yes, in others no. If it makes sense to structure the checks in a different way, you can definitely do that, but in some cases multiple if statements is going to be the clearest and most bug-free way of doing it. – Jeffrey Blake Mar 20 '13 at 15:15
  • I see, and by the way do i need return true; and return false; in there? especially with multiple if statements. – adamalexanderw Mar 20 '13 at 15:25
  • Unless you're using the return values somewhere, they don't have to be there. Note that if you ever want to tie this function to execution from a link-click or a submit-button-press, you might want it to always return false to avoid reloading the page unintentionally. See http://stackoverflow.com/questions/3384960/want-html-form-submit-to-do-nothing/3384971#3384971 for more on that. But again, for the purposes that you're at now, return values probably only matter if you're actually using them somewhere. – Jeffrey Blake Mar 20 '13 at 15:31