首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >基于名称的复选框选择提示其他复选框选项

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

Stack Overflow用户
提问于 2019-05-23 02:52:15
回答 1查看 28关注 0票数 1

如果选择了newStatususedStatus的任何选项,但仅针对所选的选项,我将尝试设置这两个选项的值。

现在,如果您选择"New mowers“,然后单击其中一个选项,您将在控制台中看到New Selection1Used Selection显示在控制台中。对于此示例和功能,应该只显示New Selection1

下面的if语句控制着它:

代码语言:javascript
复制
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);
}

您可以看到,我正在根据名称检查特定的复选框,所以我不确定为什么如果您选择了一个新的割草机选项,那么used也会被选中。

有谁有主意吗?

代码语言:javascript
复制
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);
	});
代码语言:javascript
复制
<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>

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-23 03:12:21

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

代码语言:javascript
复制
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);
});
代码语言:javascript
复制
<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,因此这两个字符串都被打印出来。我改变了它来检查实际的属性,有几种不同的方法可以做到这一点,但是下面的方法是你想要的。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56263226

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档