在使用 JavaScript 开关大小写时遇到问题

Having Issue On Using JavaScript Switch Case

本文关键字：遇到 问题 大小写 开关 JavaScript      更新时间：2023-09-26

>演示

你能告诉我如何在下面的情况下使用 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，谢谢。

像这样？

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

如果你的例子是开关 或者确实不需要 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文档

试试这个，

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

你可以试试这个：

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

 $('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');
        }
    });
相关文章：