Question

我试图根据您选择的2个单选按钮来更改我的表单下面的文字＆＃39;是＆＃39;或者没有＆＃39;。我有一个函数getCats，它将catVal设置为所选的单选按钮。函数showCats具有一个if语句，它根据catVal的值更改文本。提交是表单的提交按钮的id，cat是yes和no单选按钮的名称。

目前点击功能不起作用，警报永远不会出现。

oneAm

Answer 1

您有多个问题：

为了计算 catVal ，你可以简单地写：$（＆＃34; [name =＆＃39; cat＆＃39;]：checked＆＃34;）。val（）< / LI>
函数showCats需要输入前一个catVal

＆＃13;

$(document).ready(function () {
    $('#submit').click(function (e) {
        e.preventDefault();
        getCats();
    });
});
function getCats() {
    var catVal = $("[name='cat']:checked").val();
    showCats(catVal);
}
function showCats(catVal) {
    if (catVal == 'yes') {
        $("#catReact").text('Hello fellow cat lover!');
    }
    if (catVal == 'no') {
        $("#catReact").text('I guess you must be a dog person.');
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form action="">
    <input type="radio" name="cat" value="yes"> I love cats<br>
    <input type="radio" name="cat" value="no" checked> I dislike cats<br>
    <input type="submit" id="submit" value="Submit">
</form>

<p id="catReact"></p>

＆＃13;

Answer 2

您的代码需要进行多项更改。

您需要更改选择器。此外，最好使用无线电组名称，而不是检查for循环中的每个单选按钮。
catValue应该是函数的参数，因此它可以重用。
您应该使用按钮而不是提交以避免页面刷新
```
Here is working plunker: [Plunker][1]
```

这是代码：

＆＃13;

$(document).ready(function(){
$('#submit').click(function(){
    alert('k');
    getCats();
}); });
function getCats() {
var catVal= $("[name='cat']:checked").val();;

showCats(catVal);  } 
function showCats(catVal){
    alert(catVal);
    console.log($("#catReact"))
    if (catVal == 'yes'){
        $("#catReact").text('Hello fellow cat lover!');
    }
    if (catVal == 'no'){
        $("#catReact").text('I guess you must be a dog person.');
    }
}

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <form action="">
  <input type="radio" id="radio1" name="cat" value="yes"> Cat<br>
  <input type="radio" id="radio2" name="cat" value="no"> Dog<br>
  
  <input type="button" id="submit" value="submit">
  <div id="catReact" ></div>
</form>
    
  </body>

</html>

＆＃13;

Answer 3

提交是表单
的提交按钮的ID

我怀疑您提交表单时问题与浏览器重定向有关...我认为您应该尝试以下代码：

$('form').submit(function (e) {
  e.preventDefault();
  alert('k');
  getCats();
});

Jquery按钮单击功能根本不起作用

3 个答案: