jquery按钮点击功能根本不起作用

我试图让我的表格下方的文本根据您选择的2个单选按钮'yes'或'no'进行更改。我有一个函数getCats将catVal设置为所选的单选按钮。 showCats函数具有if语句，该语句根据catVal的值更改文本。 Submit是表单提交按钮的ID，cat是yes和no单选按钮的名称。jquery按钮点击功能根本不起作用

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

$(document).ready(function(){ 
    $('#submit').click(function(){ 
     alert('k'); 
     getCats(); 
    }); 
}); 
function getCats() { 
    var cats = $([name='cat']); 
    var catVal; 
    for(var i = 0; i < cats.length; i++){ 
     if(cats[i].checked){ 
      catVal = cats[i].value; 
     } 
    } 
    showCats(); 
} 
function showCats(){ 
    alert('show'); 
    if (catVal == 'yes'){ 
     $("#catReact").text('Hello fellow cat lover!'); 
    } 
    if (catVal == 'no'){ 
     $("#catReact").text('I guess you must be a dog person.'); 
    } 
}

来源

2017-04-26 Kait Jardine

VAR的猫= $（[名称= '猫']）;应该给你一个语法错误。它可能是... –

另外，如果你要比较字符串，请确保使用===而不是==。 –

@Adrián的一个问题，如果比较字符串，为什么还需要三重等号？我以为你只需要如果你想检查变量的类型。 –

有需要你的代码多次更改。

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

这里是代码：

$(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.'); 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]*" 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>

来源

2017-04-26 22:37:00 alpeshpandya

提交的提交按钮为形式

我怀疑，当你提交表单你的问题是关系到浏览器重定向的ID ......我想你应该尝试以下代码：

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

来源

2017-04-26 22:13:47 Badacadabra

你有一个以上的问题更多：

为了计算catVal可以简单的写：$（ “[NAME = '猫']：勾选”）VAL（）
功能showCats需要输入先前catVal

$(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.'); 
 
    } 
 
}

<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>

来源

2017-04-26 22:16:01 gaetanoM

很好的回答，错过了'：checked'。删除了我的答案;） –

jquery按钮点击功能根本不起作用

回答

相关问题