时间戳

首页 > 解决方案 > 如何根据单选按钮上选择的输入值传递值？

jquery - 如何根据单选按钮上选择的输入值传递值？

问题描述

我正在尝试在两个数组之间切换，以根据单选按钮的选择执行一些计算。为此，我有两个具有通用名称属性的单选按钮，默认情况下，我在 html 上没有选中选项。

<div class="control">
  <label for="Yes">
    <input id="Yes" name="ip" type="radio" value="Yes" />
    Yes
  </label>
  <label for="No">
    <input id="No" name="ip" type="radio" value="No"  checked />
    No
  </label>
</div>

我正在传递 array_one，当用户选中 Yes 单选按钮时，它需要切换到 array_two 并使用这些值进行计算。我怎样才能让它工作。我错过了什么？

var array_one = [1,2,3,4,5,6];
var array_two = [2,3,4];
var age = 20;

var rates = array_one;

function calculate(){
    var outputA = rates[age-16] *  68000 / 1000;
   $('#ip').html("$" + outputA);
}


if($("input[name=ip]:checked").val() == 'Yes') {
  rates = array_two;
  console.log($("input[name=ip]:checked").val());  
  calculate();
}else{
 calculate();
}

我已经提供了 JSfiddle 的链接。

https://jsfiddle.net/p0um5v7e/9/

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function() {
  banner.addClass("alt")
})

var array_one = [1, 2, 3, 4, 5, 6];
var array_two = [2, 3, 4];
var age = 20;

var rates = array_one;

function calculate() {
  var outputA = rates[age - 16] * 68000 / 1000;
  $('#ip').html("$" + outputA);
}


if ($("input[name=ip]:checked").val() == 'Yes') {
  rates = array_two;
  console.log($("input[name=ip]:checked").val());
  /* var array_one = [1,2,3,4,5,6];
  var array_two = [2,3,4];
  var age = 25; */

  banner.addClass("alt");
  calculate();
} else {
  calculate();
}
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</div>
<div class="control">
  <label for="Yes">
    <input id="Yes" name="ip" type="radio" value="Yes" />
    Yes
  </label>
  <label for="No">
    <input id="No" name="ip" type="radio" value="No"  checked />
    No
  </label>
</div>
<div id="ip">

</div>

标签： jquery

解决方案

您需要监听单选按钮的更改事件并触发重新计算。您还可以在该函数内移动单选按钮检查。

age - 16此外，如果值超出所用数组的索引范围（否则会导致） ，您需要添加某种回退"$NaN"。在此示例中，我假设值为 0，但您可能需要根据需要对其进行调整。

var array_one = [1, 2, 3, 4, 5, 6];
var array_two = [2, 3, 4];
var age = 20;

function calculate() {
  var rates = $("input[name=ip]:checked").val() === 'Yes' ? array_one : array_two;
  var outputA = (rates[age - 16] || 0) * 68000 / 1000;
  $('#ip').html("$" + outputA);
}

$("input[name=ip]").on('change', function() {
  calculate();
});

calculate();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="control">
  <label for="Yes">
    <input id="Yes" name="ip" type="radio" value="Yes" />
    Yes
  </label>
  <label for="No">
    <input id="No" name="ip" type="radio" value="No"  checked />
    No
  </label>
</div>
<span id="ip"></span>

推荐阅读