Question

请您查看This Demo并告诉我如何使用JS Switch Case正确更改页面背景？

正如您在演示中看到的那样，我在所有选中的复选框中收到c1？

 $("#doIt").on("click", function(){
    var check = $('input:checkbox[name=cc]');
    if($(check).is(':checked')){
       
         var id = $(check).attr('id');
        switch (id) {
            case 'c1':
                $("body").css("background-color", "yellow");
                  console.log(id);
                break;
             case 'c2':
                $("body").css("background-color", "green");
                  console.log(id);
                break;
             case 'c3':
                $("body").css("background-color", "pink");
                console.log(id);
                break;
        }
    }
    else{
        alert('Un Checked');
        }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label><br />
<input type="checkbox" id="c2" name="cc" />
<label for="c2"><span></span>Check Box 2</label><br />
<input type="checkbox" id="c3" name="cc" />
<label for="c3"><span></span>Check Box 3</label><br />
<input type="checkbox" id="c4" name="cc" />
<label for="c4"><span></span>Check Box 4</label><br />

<button id="doIt" type="button">Click Me!</button>

Answer 1

您只检查代码中的第一个匹配项。相反，您应该使用.each方法检查所有复选框：

$("#doIt").on("click", function(){
    $('input:checkbox[name=cc]').each(function() {
        if($(this).is(':checked')){

            var id = $(this).attr('id');
            switch (id) {
                case 'c1':
                    $("body").css("background-color", "yellow");
                      console.log(id);
                    break;
                 case 'c2':
                    $("body").css("background-color", "green");
                      console.log(id);
                    break;
                 case 'c3':
                    $("body").css("background-color", "pink");
                    console.log(id);
                    break;
            }
        }
        else{
            alert('Un Checked');
            }
    });
});

Answer 2

这一行：

var id = $(check).attr('id');

没有按照你的想法行事。它返回第一个复选框的属性，而不是已选中的属性。

您应该遍历所有复选框，测试是否选中了该复选框，并获取其ID。

＆＃13;

$("#doIt").on("click", function() {
  $('input:checkbox[name=cc]').each(function(i, check) {
    if ($(check).is(':checked')) {
      var id = $(check).attr('id');
      switch (id) {
        case 'c1':
          $("body").css("background-color", "yellow");
          console.log(id);
          break;
        case 'c2':
          $("body").css("background-color", "green");
          console.log(id);
          break;
        case 'c3':
          $("body").css("background-color", "pink");
          console.log(id);
          break;
      }
    } else {
      alert('Un Checked');
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label>
<br />
<input type="checkbox" id="c2" name="cc" />
<label for="c2"><span></span>Check Box 2</label>
<br />
<input type="checkbox" id="c3" name="cc" />
<label for="c3"><span></span>Check Box 3</label>
<br />
<input type="checkbox" id="c4" name="cc" />
<label for="c4"><span></span>Check Box 4</label>
<br />

<button id="doIt" type="button">Click Me!</button>

＆＃13;

请注意，如果选中了多个框，则会根据最后一个框设置背景颜色。如果有任何未经检查的框，它将为每个框生成警报。我不确定你对这些案件真正想要的是什么。如果这些应该是互斥的，那么您可能应该使用单选按钮而不是复选框。

Answer 3

另一种选择是仅查询已检查的输入。

 $("#doIt").on("click", function(){
    var check = $('input:checked:checkbox[name=cc]');
    if($(check).is(':checked')){
       
         var id = $(check).attr('id');
        switch (id) {
            case 'c1':
                $("body").css("background-color", "yellow");
                  console.log(id);
                break;
             case 'c2':
                $("body").css("background-color", "green");
                  console.log(id);
                break;
             case 'c3':
                $("body").css("background-color", "pink");
                console.log(id);
                break;
        }
    }
    else{
        alert('Un Checked');
        }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label><br />
<input type="checkbox" id="c2" name="cc" />
<label for="c2"><span></span>Check Box 2</label><br />
<input type="checkbox" id="c3" name="cc" />
<label for="c3"><span></span>Check Box 3</label><br />
<input type="checkbox" id="c4" name="cc" />
<label for="c4"><span></span>Check Box 4</label><br />

<button id="doIt" type="button">Click Me!</button>

Answer 4

你很近，但[name =“cc”]必须有引号，并会选中所有复选框。试试这个：

$("#doIt").on("click", function(){
    var check = $('input[name="cc"]:checked');
    if(check.length > 0){
       
         var id = $(check).attr('id');
        switch (id) {
            case 'c1':
                $("body").css("background-color", "yellow");
                  console.log(id);
                break;
             case 'c2':
                $("body").css("background-color", "green");
                  console.log(id);
                break;
             case 'c3':
                $("body").css("background-color", "pink");
                console.log(id);
                break;
        }
    }
    else{
        alert('Un Checked');
        }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="c1" name="cc" /><label for="c1">Yellow</label>
<input type="radio" id="c2" name="cc" /><label for="c2">Green</label>
<input type="radio" id="c3" name="cc" /><label for="c3">Pink</label>
<br>
<button type="button" id="doIt">Do it!</button>

在JS中使用带Checkbox的Switch Case的问题

4 个答案: