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

【问题标题】：JQuery - do something for both selected and unselected checkboxesJQuery - 为选中和未选中的复选框做一些事情
【发布时间】：2013-08-04 23:16:12
【问题描述】：

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

 $('#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 for the full block of code I am working on

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') 不起作用？

【问题讨论】：

你能用包含的 HTML 创建一个工作小提琴
在问题中添加了链接

标签： jquery select each

【解决方案1】：

我已经通过将所选内容放入一个数组然后再次运行 .each 并隐藏所有不在数组中的跨度来对其进行排序。它现在按预期工作。 Here's the JSFiddle for the working solution in case anyone needs it.

下面是相关代码：

$("#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

【讨论】：

【解决方案2】：

这样的东西会起作用

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

【讨论】：