CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Paul
Paul

Reputation: 3368

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>

Upvotes: 1

Views: 42

Answers (1)

trker
trker

Reputation: 411

Changed logic to get the desired results.

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(', ');
	});
    var radioSelID = $("input:radio[name=notifymethod]:checked").attr('id');
    if(newSel.length && radioSelID == "newMowerSelect") {
        newStatus = '1';
	    console.log('New Selection' + newStatus);
    }
    if(usedSel.length && radioSelID == "usedMowerSelect") {
        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>

Old answer:

Your if statements were just checking a string, which in JavaScript was always returning true and thus both were being printed. I changed it to check the actual property instead, there a couple different ways to do this but the following does what you want.

Upvotes: 2

Related Questions