Hello I'm wondering if it's possible to use jQuery to check if checkboxes are checked in a smart way, let's say that we use a switch case with a bunch of input fields, as an example I got 5 checkboxes. Company, name, username, age, password. And if you check Company, I can run my code.

I want to do this in the smartest way as possible in jQuery, let's say I want something like this in pseudo

switch(checkboxarray?) {

    case Company: 
    document.write("Company: INPUT FIELD");
    break;

}

I've looked into this but I've only found solutions that provide a function for one checkbox

<script src="//ajax.googleapis/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">  
$(document).ready(function() {
    $('#messageVisibilityCheckbox').change(
        function () {
            if ($('#messageVisibilityCheckbox').is(':checked')) {
                alert('is checked'); //document.write("Company: INPUT FIELD);
            }  
            else {

            }
    });
});
</script>

and the HTML:

sinput type="checkbox" id="messageVisibilityCheckbox" name="messageVisibilityCheckbox"/>

so instead of creating a bunch of functions, I want to create one function with a switch case or something equal were I can just add a few lines for each checkbox. The reason why I need this is because I'll have like 30 checkboxes and half of them requires an extra input field, any help or source is highly appreciated! Thanks!

Hello I'm wondering if it's possible to use jQuery to check if checkboxes are checked in a smart way, let's say that we use a switch case with a bunch of input fields, as an example I got 5 checkboxes. Company, name, username, age, password. And if you check Company, I can run my code.

I want to do this in the smartest way as possible in jQuery, let's say I want something like this in pseudo

switch(checkboxarray?) {

    case Company: 
    document.write("Company: INPUT FIELD");
    break;

}

I've looked into this but I've only found solutions that provide a function for one checkbox

<script src="//ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">  
$(document).ready(function() {
    $('#messageVisibilityCheckbox').change(
        function () {
            if ($('#messageVisibilityCheckbox').is(':checked')) {
                alert('is checked'); //document.write("Company: INPUT FIELD);
            }  
            else {

            }
    });
});
</script>

and the HTML:

sinput type="checkbox" id="messageVisibilityCheckbox" name="messageVisibilityCheckbox"/>

so instead of creating a bunch of functions, I want to create one function with a switch case or something equal were I can just add a few lines for each checkbox. The reason why I need this is because I'll have like 30 checkboxes and half of them requires an extra input field, any help or source is highly appreciated! Thanks!

• javascript
• jquery
• checkbox
• switch-statement

• 2 Your question is unclear and your pseudo-code is not helping to clear anything up. Before you do anything in "the smartest way possible", try to do it at all. And you don't really need jQuery for this, you should be able to solve it without. – Tomalak Commented Oct 7, 2014 at 18:35
• 1 Thank you for your opinion, I've fixed it now so it should be easier to understand! – Denniz Commented Oct 7, 2014 at 18:56
• Definitely much better! – Tomalak Commented Oct 7, 2014 at 18:59

1 Answer 1

You could group multiple individual HTML elements under the same parent and use jQuery's event delegation.

Example

$(function() {
    $('#allCheckboxes').on("change", ":checkbox", function () {
        if (this.checked) {
            console.log(this.id + ' is checked');
        } else {
            console.log(this.id + ' is unchecked');
        }
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="allCheckboxes">
  <input type="checkbox" id="chkBox1" name="Box1" />
  <input type="checkbox" id="chkBox2" name="Box2" />
  <input type="checkbox" id="chkBox3" name="Box3" />
  <input type="checkbox" id="chkBox4" name="Box4" />
  <input type="checkbox" id="chkBox5" name="Box5" />
</div>

Hint: Don't use document.write(). Ever. Just forget it exists, there is no reason that would justify using this function.