jquery - JQuery - 为选中和未选中的复选框做一些事情

Question

我可以使用以下方法遍历我选择的框：

 $('#sel_driver_file_options :selected').each(function(i, selected) { 
                //console.log($(this).val());
                var driverName = $(this).val();
                var driverText = $(this).text();
                $("#tr_file_options_input").show();
                $("#span_" + driverName).show();
                $('<div id="desc_file_options_input_' + driverName + '">Enter a Value For ' + driverText + '</div>').prependTo($("#span_" + driverName));
            }); // end selected each

但是如何对“#sel_driver_file_options”中未选中的所有复选框执行操作？

我想要做的是删除添加的：

$('<div id="desc_file_options_input_' + driverName + '">Enter a Value For ' + driverText + '</div>').prependTo($("#span_" + driverName));

当用户取消选择它时。否则，如果他们再次选择它，它会创建第二个。

编辑：我正在处理的完整代码块的 JSFiddle

Edit2：更新了 JSFiddle，为了更好的组织而重新编写了表格，将关闭函数更改为：

close: function (event, ui) {
            $('#sel_driver_file_options :selected').each(function (i, selected) {
                var driverName = $(this).val();
                var driverText = $(this).text();
                var driverSpan = $("#span_" + driverName);
                var driverDesc = $("#desc_" + driverName);
                console.log("Selected = " + driverName);
                $("#tr_file_options_input").show();
                $(driverSpan).show();
                $(driverDesc).show();
            }); // end each selected
            $('#sel_driver_file_options').not(':selected').each(function () {
                //if ($('#sel_driver_file_options').not(':selected')) {
                var driverName = $(this).val();
                var driverText = $(this).text();
                var driverSpan = $("#span_" + driverName);
                var driverDesc = $("#desc_" + driverName);
                console.log("Not Selected = " + driverName);
                $(driverSpan).hide();
                $(driverDesc).hide();
                // driverSpan.find('[id^="desc_file_options_input_"]').remove();
            }); // end each not selected
            //$('#desc_file_options_input_' + driverName).remove();
        } //end close function

现在控制台显示：

Selected = default-priority
Not Selected = default-priority

好像 not(':selected') 不起作用？

Answer 1

我已经通过将所选内容放入一个数组然后再次运行 .each 并隐藏所有不在数组中的跨度来对其进行排序。它现在按预期工作。 这是工作解决方案的 JSFiddle，以防万一有人需要它。

这是相关的代码：

$("#sel_driver_file_options").multiselect({
    show: ["blind", 200],
    hide: ["blind", 500],
    multiple: true,
    selectedList: 3,
    noneSelectedText: "Select file() options",
    open: function (event, ui) {
        // nothing for now
    },
    close: function (event, ui) {
        var arr = [];
        $('#sel_driver_file_options :selected').each(function (i, selected) {
            var driverName = $(this).val();
            var driverText = $(this).text();
            var driverSpan = $("#span_" + driverName);
            var driverDesc = $("#desc_" + driverName);
            arr.push(driverName);
            console.log("Selected = " + driverName);
            $("#tr_file_options_input").show();
            $(driverSpan).show();
            $(driverDesc).show();
        }); // end each selected
        // Now loop through all options and remove spans for unselected ones
        $('#sel_driver_file_options option').each(function () {
            var driverName = $(this).val();
            var driverText = $(this).text();
            var driverSpan = $("#span_" + driverName);
            var driverDesc = $("#desc_" + driverName);
            if ($.inArray(driverName, arr) == -1) {
                console.log("Not in array: " + driverName);
                $(driverSpan).hide();
                $(driverDesc).hide();
            }
        }); // end each not selected
    } //end close function
}); // end multiselect

Answer 2

像这样的东西会起作用

$('#sel_driver_file_options').not(':selected');