JS中选择被选中的单选框radio和jQuery选择被选中的单选框的方法以及简单的数字加减

最新推荐文章于 2022-04-25 00:43:19 发布

Gavin__Xie

最新推荐文章于 2022-04-25 00:43:19 发布

阅读量1.5k

点赞数

分类专栏：前端jQuery 文章标签： jquery html javascript

本文链接：https://blog.csdn.net/xiejinwen/article/details/53679055

版权

前端jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

以下是代码片段

HTML片段：

起步价：<strong style="color:#007ce6; font-size:16px; " id="beginPr">75000 元 </strong><br> 当前价：
	<strong style="color:#ff6c4d;; font-size:16px;">75200 元</strong>
	</div>				
		<div id='isguanzhu' class="focusa" style="colour:black">
			<a>已关注</a>
		</div>
	</div>
</div>
	<div class="btna">
	<span style="color:#9d9d9d">

		<form action="#" class="form-inline">
							
			<div style=" margin-bottom: 6px;">
				<span style=" color: #333;">选择加减金额：</span>
				<div class="radio-inline" style=" color: #f54133; ">
					<label>
						<input id="price1" type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>100				    
					</label>
				</div>
				<div class="radio-inline" style=" color: #f54133; ">
					<label>
						<input id="price2" type="radio" name="optionsRadios" id="optionsRadios2" value="option2">200
					</label>
				</div>
				<div class="radio-inline" style=" color: #f54133; ">
					<label>
						<input id="price3" type="radio" name="optionsRadios" id="optionsRadios3" value="option3">500
					</label>
				</div>
				<span>元</span>
			</div>

以下是JS和jQuery片段：<script>
			$(function (){
				// var oBegin = document.getElementById('beginPr');
				// var oPrice = document.getElementById('Price');
				// var oP1 = document.getElementById('price1');
				// var oP2 = document.getElementById('price2');
				// var oP3 = document.getElementById('price3');
				// var oS = document.getElementById('sub');
				// var oA = document.getElementById('add');

				// // oPrice.value = parseFloat(oBegin.innerHTML)/10000;

				// oPrice.value = parseFloat(oBegin.innerHTML)/10000;
				

				// oA.onclick = function (){
				// 	if( oP1.checked ){
				// 		oPrice.value = (parseFloat(oPrice.value) + 0.01).toFixed(2);
				// 	}else if(oP2.checked){
				// 		oPrice.value = (parseFloat(oPrice.value) + 0.02).toFixed(2);
				// 	}
				// 	else {
				// 		oPrice.value = (parseFloat(oPrice.value) + 0.05).toFixed(2);
				// 	}
				// };

				// oS.onclick = function (){
				// 	if( oP1.checked ){
				// 		if( oPrice.value < parseFloat(oBegin.innerHTML)/10000 || oPrice.value == parseFloat(oBegin.innerHTML)/10000){
				// 			oPrice.value = parseFloat(oBegin.innerHTML)/10000;
							
				// 		}else {
				// 			oPrice.value = (parseFloat(oPrice.value) - 0.01).toFixed(2);
				// 		}
						
				// 	} else if (oP2.checked){
				// 		if( oPrice.value < parseFloat(oBegin.innerHTML)/10000 || oPrice.value == parseFloat(oBegin.innerHTML)/10000){
				// 			oPrice.value = parseFloat(oBegin.innerHTML)/10000;
							
				// 		}else {
				// 			oPrice.value = (parseFloat(oPrice.value) - 0.02).toFixed(2);
				// 			if(oPrice.value < parseFloat(oBegin.innerHTML)/10000){
				// 				oPrice.value = parseFloat(oBegin.innerHTML)/10000;
				// 			}
				// 		}
				// 	}
				// 	else {
				// 		if( oPrice.value < parseFloat(oBegin.innerHTML)/10000 || oPrice.value == parseFloat(oBegin.innerHTML)/10000){
				// 			oPrice.value = parseFloat(oBegin.innerHTML)/10000;
							
				// 		}else {
				// 			oPrice.value = (parseFloat(oPrice.value) - 0.05).toFixed(2);
				// 			if(oPrice.value < parseFloat(oBegin.innerHTML)/10000){
				// 				oPrice.value = parseFloat(oBegin.innerHTML)/10000;
				// 			}
				// 		}
				// 	}
				// };
				
					//var oP1 = document.getElementById('parse1');
					var b = (parseFloat($('#beginPr').html())/10000).toFixed(2);
					$('#Price').val(b);

					$('#add').on('click',function(){
						if($('#price1').attr('checked')){
							var a = (parseFloat($('#Price').val()) + 0.01).toFixed(2);
							$('#Price').val(a);
						}else if($('#price2').attr('checked')) {
							var a = (parseFloat($('#Price').val()) + 0.02).toFixed(2);
							$('#Price').val(a);
						}else {
							var a = (parseFloat($('#Price').val()) + 0.05).toFixed(2);
							$('#Price').val(a);
						}
					});

					$('#sub').on('click',function (){
						if( $('#price1').is(':checked') ){
							if(parseFloat($('#Price').val()) > b){
								var c = (parseFloat($('#Price').val()) - 0.01).toFixed(2);
								$('#Price').val(c);
							}
						}else if( $('#price2').is(':checked') ){
							if(parseFloat($('#Price').val()) > b){
								var c = (parseFloat($('#Price').val()) - 0.02).toFixed(2);
								$('#Price').val(c);
								if( parseFloat($('#Price').val()) < b || parseFloat($('#Price').val()) == b){
									$('#Price').val(b);
								}
							}else {
								$('#Price').val(b);
							}
						}else{
							if(parseFloat($('#Price').val()) > b){
								var c = (parseFloat($('#Price').val()) - 0.05).toFixed(2);
								$('#Price').val(c);
								if( parseFloat($('#Price').val()) < b || parseFloat($('#Price').val()) == b){
									$('#Price').val(b);
								}
							}else {
								$('#Price').val(b);
							}
						}
					});
					
			});
				
		</script>