1

I could use some insight or a helpful reference on where to look for checking values on selected checkboxes and if there are duplicates, only return one.

I'm working on a software trial wizard using bootstrap wizard. The first tab is a "solutions catalog" where the user can filter through hundreds of solutions. Many solution types are duplicate as they apply to multiple industry types.

Once user makes selections they go to tab 2 and review their selections. I'm able to map :checked and join the values in a custom separator in the next step but can't figure out how to only show one instance of a duplicate value.

For example, user might select two types of "Audits" for a customized solution. However, the provisioning team only wants to know that they want an "Audit" module.

<input type="checkbox" class='selection' value="Audits" name="Audits - Manufacturing">
<input type="checkbox" class='selection' value="Audits" name="Audits - Electrical">
<input type="checkbox" class='selection' value="Audits" name="Audits - Retail">
<input type="checkbox" class='selection' value="Trading" name="Trading - Manufacturing">
<input type="checkbox" class='selection' value="Trading" name="Trading - Retail">

My current code is outputting multiple selections of same value and kinda stuck on how to handle this.

$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
    onNext: function(tab, navigation, index) {
        if (index == 1) {
            // Make sure we entered the solutions
            if (!$('.selection:checked').val()) {
                alert('Please select a solution to try');
                $('.selection').focus();
                return false;
            }
        }
        // Show selections in next tab
        $('#showSelection').html('<li>' + $('.selection:checked').map(function() {
            return $(this).val();
        }).get().join('</li><li>') + '</li>');
      }
    });
});
4

1 回答 1

0

You could use an array to store the values you have already seen. Something like:

$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
    onNext: function(tab, navigation, index) {
        if (index == 1) {
            // Make sure we entered the solutions
            if (!$('.selection:checked').val()) {
                alert('Please select a solution to try');
                $('.selection').focus();
                return false;
            }
        }
        var selections = [];
        // Show selections in next tab
        $('.selection:checked').each(function() { 
            var value = $(this).val()
            if ($.inArray(value, selections) < 0){
               selections.push(value);
            }
        })
        $('#showSelection').html('<li>' + selections.join('</li><li>') + '</li>');
      }
    });
});

fiddle: http://jsfiddle.net/2a460tfc/10/

于 2014-08-18T19:19:45.137 回答