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

第2版：更新了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');