如何检查选择了哪个单选按钮，并在jQuery中使用if else语句应用适当的行为
[英]How can I check which radio button is selected and apply an appropriate behaviour with if else statements in jQuery
问题描述
这是我的代码 ：
http://codepen.io/ekilja01/full/KaMXjp/
我正在尝试检测选择了哪个单选按钮，然后显示适当的输出，无论是摄氏度还是华氏度作为最终输出。
这是我的HTML ：
<body>
<div class="container-fluid">
<i class="fa fa-thermometer-empty fa-2x" aria-hidden="true"></i>
<br><br><br>
<form>
<input type="radio" name="celsiusOrFahrenheit" value="f" id="fahrenheit"> Fahrenheit °F;<br>
<input type="radio" name="celsiusOrFahrenheit" value="c" id ="celsius" > Celsius °C<br>
</form>
<div class="yourlocation">
<h1>Your location is: </h1>
<p class="yourLocationGoesHere">
</p>
</div>
<h1>Your current weather is: </h1>
<div class="showTemperature">
<p class="showDegree"></p>
</div>
<div class="icon">
</div>
</div>
</body>
这是我的jQuery：
$(document).ready(function(){
$.getJSON("http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=7f5806c8f3fd28b03e2d6580a50732d6", function (data){
var len = data.length;
var location = "";
var temperature = "";
var celsius = Math.floor(data.main.temp - 273.15);
var fahrenheit = Math.floor(9/5 * (data.main.temp - 273) + 32);
function checkSelection(){ if(document.getElementById('celsius').checked) {
//Celsius radio button is checked
return celsius;
}else if(document.getElementById('fahrenheit').checked) {
//Fahrenheit radio button is checked
return fahrenheit;
} else {
return "Please select Fahrenheit or Celsius"
}
};
location += "<p>'" + data.name + ", " + data.sys.country + "'</p>";
temperature += "<p>'" + checkSelection() + "'</p>";
$(".yourLocationGoesHere").html(location);
$(".showDegree").html(temperature);
});
});
请帮忙。
4 个解决方案
解决方案1
2 已采纳 2017-01-15 23:01:43
你需要听取无线电的改变事件，并在事件处理程序的条件下做你想做的任何事情
$(':radio').change(function(){
// "this" will be the checked radio element
if (this.id === 'celsius'){
// code you want for celsius
}else{
// code you want for fahrenheit
}
});
解决方案2
1 2017-01-15 23:01:55
change单选按钮时，需要attach change事件处理程序。
此外，您必须在外部声明celsius和fahrenheit变量，以便在change方法中访问它们。
$(document).ready(function(){ var celsius=""; var fahrenheit=""; $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=7f5806c8f3fd28b03e2d6580a50732d6", function (data){ var len = data.length; var location = ""; celsius = Math.floor(data.main.temp - 273.15); fahrenheit = Math.floor(9/5 * (data.main.temp - 273) + 32); location += "<p>'" + data.name + ", " + data.sys.country + "'</p>"; $(".yourLocationGoesHere").html(location); }); $('input[type="radio"]').change(function(){ temperature = ""; if(document.getElementById('celsius').checked) { temperature += "<p>'" + celsius+ "'</p>"; $(".showDegree").html(temperature); }else if(document.getElementById('fahrenheit').checked) { temperature += "<p>'" + fahrenheit+ "'</p>"; $(".showDegree").html(temperature); } else { return "Please select Fahrenheit or Celsius" } }); });
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P'); body { max-width: 42em; padding: 2em; margin: 5px auto; color: #161616; font-family: 'Press Start 2P', cursive; text-align: center; background-color: currentColor; } h1 { line-height: 45px; color: #fff; font-weight: lighter; font-size: 1em; font-family: 'Press Start 2P', cursive; text-align: center; text-transform: uppercase; } p { color: #fff; } form { color: #fff; text-align:center !important; } i { color: #fff; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://use.fontawesome.com/43f8201759.js"> </script> <body> <div class="container-fluid"> <i class="fa fa-thermometer-empty fa-2x" aria-hidden="true"></i> <br><br><br> <form> <input type="radio" name="celsiusOrFahrenheit" value="f" id="fahrenheit"> Fahrenheit °F;<br> <input type="radio" name="celsiusOrFahrenheit" value="c" id ="celsius"> Celsius °C<br> </form> <div class="yourlocation"> <h1>Your location is: </h1> <p class="yourLocationGoesHere"> </p> </div> <h1>Your current weather is: </h1> <div class="showTemperature"> <p class="showDegree"></p> </div> <div class="icon"> </div> </div> </body>
解决方案3
0 2017-01-15 23:00:30
$(document).ready(function(){ $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=7f5806c8f3fd28b03e2d6580a50732d6", function (data){ var len = data.length; var location = ""; var temperature = ""; var celsius = Math.floor(data.main.temp - 273.15); var fahrenheit = Math.floor(9/5 * (data.main.temp - 273) + 32); function checkSelection(){ if(document.getElementById('celsius').checked) { //Celsius radio button is checked return celsius; }else if(document.getElementById('fahrenheit').checked) { //Fahrenheit radio button is checked return fahrenheit; } else { return "Please select Fahrenheit or Celsius" } }; function update(){ var loc = "<p>'" + data.name + ", " + data.sys.country + "'</p>"; temperature += "<p>'" + checkSelection() + "'</p>"; $(".yourLocationGoesHere").html(loc); $(".showDegree").html(temperature); } update(); $('input[type=radio][name="celsiusOrFahrenheit"]').on('change', update); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container-fluid"> <i class="fa fa-thermometer-empty fa-2x" aria-hidden="true"></i> <form> <input type="radio" name="celsiusOrFahrenheit" value="f" id="fahrenheit"> Fahrenheit °F;<br> <input type="radio" name="celsiusOrFahrenheit" value="c" id ="celsius" > Celsius °C<br> </form> <div class="yourlocation"> <h1>Your location is: </h1> <p class="yourLocationGoesHere"> </p> </div> <h1>Your current weather is: </h1> <div class="showTemperature"> <p class="showDegree"></p> </div> <div class="icon"> </div> </div>
解决方案4
-2 2017-01-15 22:49:29
add == true，你准备好了
的document.getElementById（ '摄氏'）。检查==真
当有多个具有相同名称的单选按钮时，如何检查选择了哪个单选按钮？ （使用jquery）
[英]How do I check which radio button is selected when there are multiple radio buttons with the same name? (using jquery)
JQuery 动作取决于选择了哪个单选按钮 - if/else
[英]JQuery actions depending on which radio button is selected - if/else
如何使用 JavaScript 和 PHP 检查是否选择了单选按钮
[英]How can I check if a radio button is selected using JavaScript and PHP
如何在不每次搜索广播组的情况下找出使用jQuery选择哪个单选按钮？
[英]How can I find out which radio button is selected using jQuery without searching for the radio group each time?
如何检查Jinja2 HTML模板中选中的单选按钮中的哪个单选按钮？
[英]How do I check which radio button in a group of radio buttons is selected in a Jinja2 HTML Template?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.