javascript - 如何使用多个复选框返回单个 div

Question

我正在处理一个带有多个复选框的页面，并希望它根据任何检查组合返回一个 div。我创建了一个 jsfiddle，但即使这是我网站上的代码，在某种程度上可以工作，但它在 jsfiddle 上不起作用:

HTML:

<div id="checkboxes">
<input type="checkbox" id="red" name="color">Red
<input type="checkbox" id="blue" name="color">Blue
<input type="checkbox" id="green" name="color">Green
</div>

<br /><br />
<div id="default" style="display:none;">Show this by default</div><br />
<div id="showred" style="display:none;">This is red</div><br />
<div id="showblue" style="display:none;">This is blue</div><br />
<div id="showgreen" style="display:none;">This is green</div><br />
<div id="showpurple" style="display:none;">This is purple</div>

JS:

$(document).ready(function() {
var r = $('#red');
var b = $('#blue');
var g = $('#green');
var p = r.add(b);

$(r).click(function(){
    if ($(r).is(':not(:checked)')) {
        $('#showred').show();
        $('#showblue').hide();
        $('#showgreen').hide();
        $('#showpurple').hide();
        $('#default').hide();
    } else {
        $('#showred').hide();
        $('#showblue').hide();
        $('#showgreen').hide();
        $('#showpurple').hide();
        $('#default').show();
    }
});

$(b).click(function(){
    if ($(b).is(':not(:checked)')) {
        $('#showred').hide();
        $('#showblue').show();
        $('#showgreen').hide();
        $('#showpurple').hide();
        $('#default').hide();
    } else {
        $('#showred').hide();
        $('#showblue').hide();
        $('#showgreen').hide();
        $('#showpurple').hide();
        $('#default').show();
    }
});

$(g).click(function(){
    if ($(g).is(':not(:checked)')) {
        $('#showred').hide();
        $('#showblue').hide();
        $('#showgreen').show();
        $('#showpurple').hide();
        $('#default').hide();
    } else {
        $('#showred').hide();
        $('#showblue').hide();
        $('#showgreen').hide();
        $('#showpurple').hide();
        $('#default').show();
    }
});

$(p).click(function(){
    if ($(r).is(':not(:checked)') && $(b).is(':not(:checked)')) {
        $('#showred').hide();
        $('#showblue').hide();
        $('#showgreen').hide();
        $('#showpurple').show();
        $('#default').hide();
    } else {
        $('#showred').hide();
        $('#showblue').hide();
        $('#showgreen').hide();
        $('#showpurple').hide();
        $('#default').show();
    }
});        
});

http://jsfiddle.net/robert316/tu0o1z0s/13/

我非常感谢任何帮助使其正常工作，我希望发生的是:

• 用户点击“红色”-> 显示红色 div
• 用户点击“蓝色”-> 显示蓝色 div
• 用户点击“红色”和“蓝色” -> 仅显示紫色 div(无红色或蓝色)

我还想修复以下行为:当用户取消选中某个框时，它会恢复为默认的 div 显示，理想情况下，如果没有选择任何框，它应该显示默认的 div，并且始终根据以下组合显示 div复选框。

非常感谢您对此提供的任何帮助。

Answer 1

如果有人发现这个问题，这里是我用来显示多个复选框选择中的单个 div 的最终代码:

代码片段:

$(document).ready(function () {

    // select checkboxes by name
    var packages = $("input[name='cc']"); 
    // set main div id  
    var packageDiv = $("#listings"); 

    // bind to change event
    packages.change(function () {
        
        // empty array
        var idArr = [];
        // get the checked values
        var checked = $("input[name='cc']:checked");
        // loop and build array
        checked.each(function () {
            idArr.push($(this).prop("id"));
        });
        
        // remove whitespace from multiple checkboxes array
        var trimArray = idArr.join("");
        
        toggleShowHide(trimArray, packageDiv);

    });
    
});

function toggleShowHide(arr, elem) {
    
    var arrLen = arr.length;
    
    // clear last selection when unchecking boxes
    $(".hide-me").hide();
    
    // set default if array is empty
    if (arrLen < 1 ){
        setDefault(elem);
    }
    
    // run the show hide based on array of selection
    
    for(i = 0; i < arrLen; i++) {
        // set the name for the selected div
        var temp = "#" + arr + "_div_id";
        
        $(temp).show();
        $("#default").hide();
         
    } 
    
    // unhide
    elem.show();
    
}

function setDefault(elem){
    $("#default").show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- Checkbox -->
<input type="checkbox" id="i" name="cc" value="i_div_id" data-ref="i_div_id" />
<label>I</label>
<input type="checkbox" id="c" name="cc" value="c_div_id" data-ref="c_div_id" />
<label>C</label>
<input type="checkbox" id="p" name="cc" value="p_div_id" data-ref="p_div_id" />
<label>P</label>
        
<br />
<br />
<br />
<br />
<!-- Loaded/hidden content div-->
<div id="listings">
<div class="hide-me" id="default"><strong>This is default copy on page</strong></div>
<div class="hide-me" id="i_div_id" style="display:none;">You ordered: <strong>I Package</strong></div>
<div class="hide-me" id="c_div_id" style="display:none;">You ordered: <strong>C Package</strong></div>
<div class="hide-me" id="p_div_id" style="display:none;">You ordered: <strong>P Package</strong></div>
<div class="hide-me" id="ic_div_id" style="display:none;">You ordered: <strong>I-C Package</strong></div>
<div class="hide-me" id="ip_div_id" style="display:none;">You ordered: <strong>I-P Package</strong></div>
<div class="hide-me" id="cp_div_id" style="display:none;">You ordered: <strong>C-P Package</strong></div>
<div class="hide-me" id="icp_div_id" style="display:none;">You ordered: <strong>I-C-P Package</strong></div>
</div>