将选中的复选框显示在一个部分中，未选中的复选框显示在另一个部分中

Display the checkboxes selected into a section and the unselected into another one

本文关键字：复选框 显示 另一个部 一个      更新时间：2023-09-26

我想在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);

网页代码

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

只需在选择后添加另一个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);
}

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

这应该有效。 添加了另一个数组列表已选中以跟踪选中的值。

<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>
相关文章：