有关使用Switch Case获取Checkbox值之一的问题

时间:2015-10-14 17:39:25

标签: javascript jquery

您能否请看一下这段代码,让我知道选择D + FD + ED的任何内容无效(除了选择C + D })

var selectedETargetNum;
$('input:checkbox[name=projectsWith]').on('change', function() {
    var val = '';
    $('input:checkbox[name=projectsWith]:checked').each(function() {
        val += $(this).val();
    });
    switch (val) {
        case 'c':
            selectedETargetNum = val;
            console.log(selectedETargetNum);
            break;
        case 'd':
            selectedETargetNum = val;
            console.log(selectedETargetNum);
            break;
        case 'e':
            selectedETargetNum = val;
            console.log(selectedETargetNum);
            break;
        case 'f':
            selectedETargetNum = val;
            console.log(selectedETargetNum);
            break;
        case 'cd':
            selectedETargetNum = val;
            console.log(selectedETargetNum);
            break;
        case 'ce':
            selectedETargetNum = val;
            console.log(selectedETargetNum);
            break;
        case 'cf':
            selectedETargetNum = val;
            console.log(selectedETargetNum);
            break;
        case 'de':
            selectedETargetNum = val;
            console.log(selectedETargetNum);
            break;
        case 'df':
            selectedETargetNum = val;
            console.log(selectedETargetNum);
            break;
        case 'ef':
            selectedETargetNum = val;
            console.log(selectedETargetNum);
            break;
        case 'cde':
            selectedETargetNum = val;
            console.log(selectedETargetNum);
            break;
        case 'cef':
            selectedETargetNum = val;
            console.log(selectedETargetNum);
            break;
        case 'cdf':
            selectedETargetNum = val;
            console.log(selectedETargetNum);
            break;
        case 'def':
            selectedETargetNum = val;
            console.log(selectedETargetNum);
            break;
        case 'cdef':
            selectedETargetNum = val;
            console.log(selectedETargetNum);
            break;
    }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="c1" class="" role="">
      <div class="">
      <div class="">C</div>
        <div class=""> <input type="checkbox" value="c" name="projectsWith" id="c1" class=""/> <span></span></div>
      </div>
</label>
    
<label for="c2" class="" role="">
      <div class="">
      <div class="">E</div>
        <div class=""> <input type="checkbox" value="e" name="projectsWith" id="c2" class=""/> <span></span></div>
      </div>
</label>

<label for="c3" class="" role="">
      <div class="">
      <div class="">F</div>
        <div class=""> <input type="checkbox" value="f" name="projectsWith" id="c3" class=""/> <span></span></div>
      </div>
</label>

<label for="c55" class="" role="">
      <div class="">
      <div class="">D</div>
       <div class=""> <input type="checkbox" value="d" name="projectsWith" id="c55" class=""/> <span></span></div>
      </div>
</label>

1 个答案:

答案 0 :(得分:0)

主要问题是,在检查单击的每个复选框时,字符串是根据复选框显示的顺序构造的。 为了解决这个问题,您需要隔离之前检查过的项目,然后查找已检查的任何新项目。

更新:

var selectedETargetNum;
var val = "";
$('input:checkbox[name=projectsWith]').on('change', function() {
    $('input:checkbox[name=projectsWith]').each(function() {
        if($(this).is(":checked"))
        {
          if(val.indexOf($(this).val()) == -1)
           val += $(this).val();
        }
        else
        {
           val = val.replace($(this).val(),"");
        }
    });

    alert("This is checked sequence : " + val);
});

小提琴:http://jsfiddle.net/gcfLso5s/3/