Question

我想要一个表单，其中用户有3个不同的单选按钮，一旦单击一个表单，将根据他们选择的单选按钮显示不同的消息。

以下是我的一些代码：

＆＃13;

 if ($('#Jordanstown').prop('checked')) 
  {
   alert("Yeah, we are on the same campus")
   }
   
   if ($('#Belfast').prop('checked')) {
   alert("Ah, we are not on the same site")
   }

＆＃13;

<form name ="mycampous">

<input type ="radio" name ="Jordanstown">Jordanstwon</input>
<input type ="radio" name ="Belfast">Belfast</input>
<input type = "button" value="select" onclick= "campous();"> </input>
  </form>

＆＃13;

Answer 1

我会稍微改变你的HTML，为所有单选按钮添加一个类，这样我就不必使用慢速的input[type='radio']选择器。

此外，单选按钮应该具有相同的name，如果您只想在任何给定时间选择其中一个，那么您需要提及一些value以区分两个单选按钮，如下所示< / p>

<form name ="mycampous">

 <input class="radio" type ="radio" name="city" value ="Jordanstown">Jordanstwon</input>
 <input class="radio" type ="radio" name="city" value ="Belfast">Belfast</input>
 <input type = "button" value="select" onclick= "campous();"> </input>

</form>

然后在您的脚本中，在这些单选按钮上查找change事件

$(document).ready(function(){
  $('.radio').on('change', function(e){
    var radioValue = $(this).val();
    if(radioValue === 'Jordanstown'){
      alert("Yeah, we are on the same campus");
    } else if(radioValue === 'Belfast'){
      alert("Ah, we are not on the same site");
    }
  });

});

这里有bin可以玩：）

Answer 2

尝试：

<input type ="radio" name ="Jordanstown"  id="Jordanstown">Jordanstwon</input>
 <input type ="radio" name ="Belfast"  id="Belfast">Belfast</input>
 <input type = "button" value="select" onclick= "campous();"> </input>
</form>

我添加了id个属性，因为$('#Belfast')是ID而非NAME的选择器。

我认为你在点击事件中包含了javascript示例，如下所示：

$('form').on('click', ':radio', function(){

  if ($('#Jordanstown').prop('checked')) 
   {
     alert("Yeah, we are on the same campus");
   }

   if ($('#Belfast').prop('checked')) {
    alert("Ah, we are not on the same site");
   }
});

最好，你也应该给表单一个id来缩小DOM搜索范围。

修改

我刚刚重新阅读了你的问题。您正在尝试提醒点击的电台。它应该是：

$('form#ID_OF_FORM').on('click', ':radio', function(){ if( $(this).is('#Jordanstown') ){ alert("Yeah, we are on the same campus"); }else{ alert("Ah, we are not on the same site"); } });

如果您的表单ID是ID_OF_FORM。

Answer 3

尝试这样的事情：

<script>
    function campous(){
        var value = $("[name='mycampous']").find("input[type='radio']:checked").val();
        alert(value);
    }
</script>
<form name="mycampous">
    <input name="campus" type="radio" value="Jordanstown">Jordanstwon</input>
    <input name="campus" type="radio" value="Belfast">Belfast</input>
    <input type="button" value="select" onclick="campous();"> </input>
</form>

http://jsfiddle.net/p7Lj1bL6/

使用.prop获取使用jquery的无线电值

3 个答案: