Question

我想显示选中div的复选框，但实际上我在列表中有一个重复的项目，我不知道如何将未选择的项目显示到另一个div中。

你可以在这里试试http://jsfiddle.net/tedjimenez/7wzR5/

这是我的代码：

JS CODE

/* Array */
    var list = new Array("valuetext000", "valuetext001", "valuetext002", "valuetext003", "valuetext004", "valuetext005", "valuetext006", "valuetext007", "valuetext008", "valuetext009", "valuetext010", "valuetext011", "valuetext012", "valuetext013", "valuetext014", "valuetext015", "valuetext016", "valuetext017")

    var html = "";

    /* Array will be converted to an ul list */

    for (var i = 0; i < list.length; i++) {
        html += "<input type='checkbox' name='boxvalue' value='" + list[i] + "' /><label>" + list[i] + "</label><br>";
    }

    $("#elmAv").append(html);

HTML代码

<form>
    <div id="elmAv"></div>
    <div id="selectionResult"></div>
    <script>
        /* Function to display the items selected */
         function showBoxes(frm) {
            var checkedItems = "\n";
            //For each checkbox see if it has been checked, record the value.
            for (i = 0; i < frm.boxvalue.length; i++) {
                if (frm.boxvalue[i].checked) {
                    checkedItems = checkedItems + "<li>" + frm.boxvalue[i].value + "<li>";
                }
            }
            $("#elmAv").empty();
            $("#selectionResult").append(checkedItems);
        }
    </script>
    <input type="Button" value="Get Selection" onClick="showBoxes(this.form)" />
</form>

Answer 1

只需在selectionResult之后添加另一个div：

<div id="unselectedResult"></div>

然后使用以下代码更新showBoxes（）：

function showBoxes(frm) {
    var checkedItems = "Checked:<br>\n";
    var uncheckedItems = "Unchecked:<br>\n";
    //For each checkbox see if it has been checked, record the value.
    for (i = 0; i < frm.boxvalue.length; i++) {
        if (frm.boxvalue[i].checked) {
            checkedItems = checkedItems + "<li>" + frm.boxvalue[i].value + "</li>";
        }
        else {
            uncheckedItems = uncheckedItems + "<li>" + frm.boxvalue[i].value + "</li>";
        }
    }
    $("#elmAv").empty();
    $("#selectionResult").append(checkedItems);
    $('#unselectedResult').append(uncheckedItems);
}

应该得到你正在寻找的结果。

Answer 2

这应该有效。添加了另一个数组listChecked来跟踪选中的值。

<script>
/* Array */
var list = new Array("valuetext000", "valuetext001", "valuetext002", "valuetext003", "valuetext004", "valuetext005", "valuetext006", "valuetext007", "valuetext008", "valuetext009", "valuetext010", "valuetext011", "valuetext012", "valuetext013", "valuetext014", "valuetext015", "valuetext016", "valuetext017")

var listChecked = new Array();

$(document).ready(function() {
    displayUnchecked();
});
/* Array will be converted to an ul list */
function displayUnchecked()
{
    var html = "";
    for (var i = 0; i < list.length; i++) {
        if ($.inArray(list[i], listChecked) == -1)
            html += "<input type='checkbox' name='boxvalue' value='" + list[i] + "' /><label>" + list[i] + "</label><br>";
    }

    $("#elmAv").html(html);
}
</script>
</head>
<body>                                                
<form>
<div id="elmAv"></div>
<div id="selectionResult"></div>
<script>

/* Display the items selected */

function showBoxes(frm) {
    var checkedItems = "\n";
    //alert('here');
    //For each checkbox see if it has been checked, record the value.
    for (i = 0; i < frm.boxvalue.length; i++) {
        if (frm.boxvalue[i].checked) {
            listChecked.push(frm.boxvalue[i].value);
        }
    }

    $.each(listChecked, function (index, value)
            {
                checkedItems = checkedItems + "<li>" + value + "</li>";
            });
    //alert('here');
    displayUnchecked();
    //$("#elmAv").empty();
    $("#selectionResult").html(checkedItems);
}
</script>
<input type="Button" value="Get Selection" onClick="showBoxes(this.form)" />
</form>                                 
</body>

显示选中的部分复选框和未选中的复选框

2 个答案: