基于名称的复选框选择提示其他复选框选项

Question

如果试图为newStatus或usedStatus设置任何一个值，但仅针对所选的那些选项，我会尝试设置值。

到目前为止，如果选择“新割草机”，然后单击其选项之一，您将在控制台中看到New Selection1和Used Selection显示在控制台中。对于此示例和功能，仅应显示New Selection1。

以下if语句控制着它：

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>

Answer 1

更改了逻辑以获得所需的结果。

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，因此都被打印了。我将其更改为检查实际属性，有两种不同的方法可以执行此操作，但是以下操作可以满足您的要求。