Having Issue On Using JavaScript Switch Case

Question

Can you please let me know how I can use JavaScript Switch Case in case like below?

<input type="checkbox" name="animal" value="Cat" id="cats" />Cats<br />
<input type="checkbox" name="animal" value="Dog" id="dogs" />Dogs<br />
<input type="checkbox" name="animal" value="Bird" id="birds" />Birds<br />

<script>
 $('input:checkbox').change(function () {
    if ($(this).is(':checked')) {
        if (this.id == "cats") {
            alert("Cat Selected");
        }
        if (this.id == "dogs") {
            alert("Dogs Selected");
        }
        if (this.id == "birds") {
            alert("Birds Selected");
        }
    } else {
        alert('Un Checked');
    }
});
</script>

I really need to learn how to use the JavaScript Switch Case on a real scenario like this , Thanks.

Using a switch (or any kind of test) in this specific case is a waste. — Denys Séguret
– Denys Séguret, Commented Jan 22, 2015 at 10:05
So you want to use switch construct instead of multiple if? — hindmost
– hindmost, Commented Jan 22, 2015 at 10:12

Ivan Sivak · Accepted Answer · 2015-01-22 10:20:28Z

3

Like this?

$('input:checkbox').change(function () {
    if ($(this).is(':checked')) {
        switch (this.id){
            case 'cats':
                alert("Cat Selected");
                break;
            case 'dogs':
                alert("Dogs Selected");
                break;
            case 'birds':
                alert("Birds Selected");
                break;
        }
    } else {
        alert('Un Checked');
    }
});

http://jsfiddle.net/ycd5pd4b/1/

UPDATE:

As per comments - to handle the unchecked items. You can try this code instead where in fact you don't need the IF condition. Theoretically don't even need a switch but depends on your intentions.

$('input:checkbox').change(function () {
    var checked = $(this).is(':checked'), strChecked = 'checked', 
        strUnchecked = 'unchecked', 
        result = (checked ? (this.id + ' ' + strChecked) : (this.id + ' ' + strUnchecked));

    // in fact this switch is useless..
    switch (this.id){
        case 'cats':
            alert(result);
            break;
        case 'dogs':
            alert(result);
            break;
        case 'birds':
            alert(result);
            break;
    }
    // you can just call this
    // alert(result);
});

jsfiddle: http://jsfiddle.net/ycd5pd4b/2/

edited Jan 22, 2015 at 10:20

answered Jan 22, 2015 at 10:11

Ivan Sivak

7,5584 gold badges39 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Suffii Over a year ago

Great , Thanks Ivan this is exactly what I was looking for but just one more question? is there any way to follow this for un checking process as well?

Ivan Sivak Over a year ago

I updated the answer. Not sure if that's what you meant though

Suffii Over a year ago

Great Thanks Ivan and tank you all

atmd · Accepted Answer · 2015-01-22 10:12:20Z

If you example as switch Or indeed a if/else is not required, you can to the same thing with just:

$('input:checkbox').change(function () {
     alert(this.id + ' Selected');
});

There isn't a case for you to get to the bottom else as your inputs all have the id's you are checking for.

The switch statement is simple though

switch (expression) {
  case value1:
    //Statements 
    [break;]
  case value2:
    //Statements 
    [break;]
  case valueN:
    //Statements 
    [break;]
  default:
    //Statements 
    [break;]
}

so in your case, something like

var theId = this.id;

switch (theId) {
    case: 'Birds';
        alert('birds');
    break;
    default: 
        alert('nothing');
    break;
}

here are the MDN docs on switch

Nishan Senevirathna · Accepted Answer · 2015-01-22 10:15:32Z

1

Try this,

<script>
$(document).ready(function(){

 $('input:checkbox').change(function () { 
    if ($(this).is(':checked')) {
        switch(this.id){
            case "cats" : alert("Cat Selected"); break;
            case "dogs" : alert("Dogs Selected"); break;
            case "birds" : alert("Birds Selected"); break;
            default : alert('Un Checked');
        }
    }
});
});
</script>

answered Jan 22, 2015 at 10:15

Nishan Senevirathna

7196 silver badges12 bronze badges

Comments

Code Prank · Accepted Answer · 2015-01-22 10:13:37Z

0

You can try this:

<script>
 $('input:checkbox').change(function () {
    var elmnt = $(this);
    if (elmnt.is(':checked')) {
       var id = elmnt.attr('id');
        switch(id) {
           case 'dogs':
             alert('Dogs selected');
             break;
           case 'cats':
             alert('Cats selected');
             break; 
           case 'birds':
             alert('Birds selected');
             break;
        }
    } else {
        alert('Un Checked');
    }
});
</script>

edited Jan 22, 2015 at 10:13

answered Jan 22, 2015 at 10:08

Code Prank

4,2706 gold badges35 silver badges48 bronze badges

1 Comment

Suffii Over a year ago

Hi Shayan, Thanks for reply but I am looking a way to understand how the Switch case can be applied on a case like this?

sha · Accepted Answer · 2015-01-22 10:21:13Z

0

 $('input:checkbox').change(function () {
        if ($(this).is(':checked')) {
            switch(this.id) {
                case "cats" : alert("cats selected."); break;
                case "dogs" : alert("dogs selected."); break;
                case "birds" : alert("birds selected."); break;
                default: alert(this.id + " selected.");
            }
        } else {
            alert('Un Checked');
        }
    });

answered Jan 22, 2015 at 10:21

sha

11 bronze badge

Collectives™ on Stack Overflow

Having Issue On Using JavaScript Switch Case

5 Answers 5

3 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related