Jquery附加功能不起作用 - 并排添加数字

Posted 2023-03-27

【中文标题】Jquery附加功能不起作用 - 并排添加数字

【英文标题】：Jquery additional function not work - number adding side by side

【发布时间】：2020-08-17 23:13:26

【问题描述】：

我正在尝试获取“Radio 值”和附加 mq 函数 (+)。 不收集号码。 并排添加。 但我想要数学运算。 乘法起作用了。

$('input[name="toplama"], input[name="toplama2"]').on('change', function() 
   var value1 = $('input[name=toplama]:checked').val();
   var value2 = $('input[name=toplama2]:checked').val();
   $( "#sonuclar" ).text( value1 + value2 );
);
$(function()
	var value1 = $('input[name=toplama]:checked').val();
   var value2 = $('input[name=toplama2]:checked').val();
    $( "#sonuclar" ).text( value1 + value2 );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="toplama">
	<label>
		<input type="radio" class="toplama" name="toplama" value="10" checked />
		10 value
	</label>
	<label>
		<input type="radio" class="toplama" name="toplama" value="20" />
		20 value
	</label>
	<br><br><br>
	<label>
		<input type="radio" class="toplama" name="toplama2" value="10" />
		10 value
	</label>
	<label>
		<input type="radio" class="toplama" name="toplama2" value="20" checked />
		20 value
	</label>
</div>
<div id="sonuclar">
	
</div>

【参考方案1】：

您的实现的问题是您从 DOM 中提取的值是字符串。这就是为什么您的数字（实际上是字符串）只是被连接而不是在数学上相加的原因。您需要将字符串值解析为整数。您可以使用parseInt() 来执行此操作，如下所示，

$('input[name="toplama"], input[name="toplama2"]').on('change', function() 
   var value1 = $('input[name=toplama]:checked').val();
   var value2 = $('input[name=toplama2]:checked').val();
   $( "#sonuclar" ).text( parseInt(value1) + parseInt(value2) );
);
$(function()
	var value1 = $('input[name=toplama]:checked').val();
   var value2 = $('input[name=toplama2]:checked').val();
    $( "#sonuclar" ).text( parseInt(value1) + parseInt(value2) );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="toplama">
	<label>
		<input type="radio" class="toplama" name="toplama" value="10" checked />
		10 value
	</label>
	<label>
		<input type="radio" class="toplama" name="toplama" value="20" />
		20 value
	</label>
	<br><br><br>
	<label>
		<input type="radio" class="toplama" name="toplama2" value="10" />
		10 value
	</label>
	<label>
		<input type="radio" class="toplama" name="toplama2" value="20" checked />
		20 value
	</label>
</div>
<div id="sonuclar">
	
</div>

【讨论】：

@SercanAslan 接受答案将不胜感激！ :)