mercredi 22 mai 2019

Checkbox selection based on name is prompting other checkbox options

I am attempting to set the value of newStatus or usedStatus if any of the options for either is selected, but for only the ones that are selected.

As of now, if you select "New mowers" and then click on one of its options, you will see in the console that New Selection1 and Used Selection is displayed in the console. For this example and the functionality, only New Selection1 should be showing.

The following if statements are controlling it:

if ("input:checkbox[name=newMowerOption]:checked") {
    newStatus = '1';
    console.log('New Selection' + newStatus);
}
if ("input:checkbox[name=usedMowerOption]:checked") {
    usedStatus = '1';
    console.log('Used Selection' + usedStatus);
}

You can see that I am checking for the specific checkboxes based on the name, so I am unsure why if you select a new mower option that the used is also selected.

Anyone have an idea?

var newStatus = ''; //Telling whether new is selected
        var usedStatus = ''; //Telling whether used is selected
        var newSelPush = '';
        var usedSelPush = '';
                
        $('.equipmentOptionCont').change(function() {

                var newSel = [];
                var usedSel = [];

                //Get new mower options
                $("input:checkbox[name=newMowerOption]:checked").each(function(){
                        newSel.push($(this).val());
                        newSelPush = newSel.join(', ');
                });
                //Get used mower options
                $("input:checkbox[name=usedMowerOption]:checked").each(function(){
                        usedSel.push($(this).val());
                        usedSelPush = usedSel.join(', ');
                });
                //Find out if new/used mower option is selected and then create variable showing 1 if true
                if ("input:checkbox[name=newMowerOption]:checked") {
                        newStatus = '1';
                        console.log('New Selection' + newStatus);
                }
                if ("input:checkbox[name=usedMowerOption]:checked") {
                        usedStatus = '1';
                        console.log('Used Selection' + usedStatus);
                }
                $('#newSel').html(newSelPush);
                $('#usedSel').html(usedSelPush);
        });

        $('#newAllOptions').click(function() {
                $('input[name=newMowerOption').toggle().prop('checked', true);
        });
        $('#usedAllOptions').click(function() {
                $('input[name=usedMowerOption').toggle().prop('checked', true);
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>New Mowers</label>
                <input type="radio" name="notifymethod" id="newMowerSelect" class="equipmentMainSel">
                <label>Used Mowers</label>
                <input type="radio" name="notifymethod" id="usedMowerSelect" class="equipmentMainSel">
                <div id="newMowerOptions" class="equipmentOptionCont">
      <p>New Mower Options</p>
                        <label>Ferris</label>
                        <input type="checkbox" name="newMowerOption" value="Ferris">
                        <label>Wright</label>
                        <input type="checkbox" name="newMowerOption" value="Wright">
                </div>
                <div id="usedMowerOptions" class="equipmentOptionCont">
      <p>Used Mower Options</p>
                        <label>Toro</label>
                        <input type="checkbox" name="usedMowerOption" value="Toro">
                        <label>John Deere</label>
                        <input type="checkbox" name="usedMowerOption" value="John Deere">
                </div>



Aucun commentaire:

Enregistrer un commentaire