Выбор флажка, основанный на имени, побуждает другие варианты флажка - PullRequest
1 голос
/ 22 мая 2019

Я пытаюсь установить значение newStatus или usedStatus, если выбран какой-либо из параметров для любого из них, но только для выбранных.

На данный момент, если вы выберете«Новые косилки», а затем нажмите на одну из ее опций, вы увидите в консоли, что New Selection1 и Used Selection отображаются в консоли.Для этого примера и функциональности должен отображаться только New Selection1.

Следующие операторы управляют им:

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);
}

Вы видите, что я проверяю определенные флажки на основена имя, поэтому я не уверен, почему, если вы выбираете новую опцию косилки, что также используется выбранная.

У кого-нибудь есть идея?

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>

1 Ответ

2 голосов
/ 22 мая 2019

Изменена логика для получения желаемых результатов.

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>

Старый ответ:

Ваши операторы if просто проверяли строку, которая в JavaScript всегда возвращала true и, таким образом, обе печатались. Вместо этого я изменил его, чтобы проверить фактическое свойство, есть несколько разных способов сделать это, но следующее делает то, что вы хотите.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...