Question

请告诉我如何在下面的情况下使用JavaScript Switch Case？

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

我真的需要学习如何在这样的真实场景中使用JavaScript Switch Case，谢谢。

Answer 1

喜欢这个吗？

$('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/

<强>更新

根据评论 - 处理未经检查的项目。您可以尝试使用此代码，而实际上您不需要IF条件。理论上甚至不需要switch，但取决于你的意图。

$('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/

Answer 2

如果你作为开关的例子或者确实不需要if / else，你可以用同样的东西：

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

由于您的输入都有您要检查的ID，因此您无需到达其他位置。

但是开关语句很简单

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

所以在你的情况下，像

var theId = this.id;

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

这是MDN docs on switch

Answer 3

试试这个，

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

Answer 4

你可以试试这个：

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

Answer 5

 $('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');
        }
    });

有关使用JavaScript Switch Case的问题

5 个答案: