选择收音机并单击按钮时，如何运行功能？
[英]How can I run a function when a radio is selected and I click a button?
问题描述
I've created this simple code that I'll use to store in the user's browser, so, I'd like to know how can I run a function when there's a selected radio and when I click the delete button, using JS or JQuery. 
我已经创建了将用于存储在用户浏览器中的简单代码，因此，我想知道当存在选定的单选并且单击删除按钮（使用JS或JQuery）时如何运行功能。 Any help is appreciated. 任何帮助表示赞赏。
Thanks in advance. 提前致谢。
check it on liveweave 在liveweave上检查
PS: Your browser should have WebStorage support PS：您的浏览器应具有WebStorage支持
var taskCounter = 1 + Number(localStorage.getItem("count")); var name = "de"+ taskCounter; for(var i=1;i<taskCounter;i++){ var temp = "de" + i; document.writeln("<br/>"+'<input type="radio" name="rad" value="'+localStorage.getItem(temp)+'" /> <label>'+localStorage.getItem(temp)+'</lable>'); } function saveItUp(){ var desc = $('#descrip').val(); alert(desc); // Store localStorage.setItem(name, desc); localStorage.setItem("count", taskCounter); // Retrieve console.log(localStorage.getItem(name)); console.log(localStorage.getItem("count")); } //This is where I'm trying to do that, I know selected doesn't exist, but I put it just for a better comprehension function deleteItUp(){ $('input:radio').selected(function(){ if (this.checked) { alert(this.value); } }); }
<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <div id="main"> <label>Task</label> <textarea id="descrip"></textarea> <button onclick="saveItUp();" id="save">Save it</button> <button onclick="deleteItUp();" id="delete">Delete</button> </div> </body> </html>
3 个解决方案
解决方案1
3 2015-08-28 14:35:45
I have edited your snippet. 我已经编辑了您的代码段。 Use $('input[type="radio"]').prop('checked') to see whether the radio button is checked. 使用$('input[type="radio"]').prop('checked')查看是否选中了单选按钮。 You will need to modify the selector to get the appropriate radio button if there are multiple on the page. 如果页面上有多个，则需要修改选择器以获取适当的单选按钮。
var taskCounter = 1 + Number(localStorage.getItem("count")); var name = "de" + taskCounter; for (var i = 1; i < taskCounter; i++) { var temp = "de" + i; document.writeln("<br/>" + '<input type="radio" name="rad" value="' + localStorage.getItem(temp) + '" /> <label>' + localStorage.getItem(temp) + '</lable>'); } function saveItUp() { var desc = $('#descrip').val(); alert(desc); // Store localStorage.setItem(name, desc); localStorage.setItem("count", taskCounter); // Retrieve console.log(localStorage.getItem(name)); console.log(localStorage.getItem("count")); } //This is where I'm trying to do that, I know selected doesn't exist, but I put it just for a better comprehension function deleteItUp() { if ($('input[type="radio"]').prop('checked')) { alert('Deleting!'); } else { alert('Delete radio not checked!'); } }
<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <div id="main"> <label>Task</label> <textarea id="descrip"></textarea> <button onclick="saveItUp();" id="save">Save it</button> <button onclick="deleteItUp();" id="delete">Delete</button> <input type="radio">Check to delete </div> </body> </html>
解决方案2
1 已采纳 2015-08-28 15:00:46
I've been trying other ways to achieve it, and I found a nice way that gave me the expected result, thank all of you who tried to help me. 我一直在尝试其他方法来实现它，但是我找到了一种可以给我带来预期结果的好方法，感谢所有尝试帮助我的人。
var taskCounter = 1 + Number(localStorage.getItem("count")); var name = "de" + taskCounter; for (var i = 1; i < taskCounter; i++) { var temp = "de" + i; document.writeln("<br/>" + '<input type="radio" name="rad" value="' + temp + '" /> <label>' + 'Code: ' + temp + ' | Value: ' + localStorage.getItem(temp) + '</lable>'); } function saveItUp() { var desc = $('#descrip').val(); alert(desc); // Store localStorage.setItem(name, desc); localStorage.setItem("count", taskCounter); // Retrieve console.log(localStorage.getItem(name)); console.log(localStorage.getItem("count")); } var selectedRadioId = 0; $('input:radio').change(function() { if (this.checked) { selectedRadioId = this.value; } }); function deleteItUp() { if (selectedRadioId !== 0) { alert('Deleting!'); } else { alert("Radio hasn't been checked!"); } }
<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <div id="main"> <label>Task</label> <textarea id="descrip"></textarea> <button onclick="saveItUp();" id="save">Save it</button> <button onclick="deleteItUp();" id="delete">Delete</button> </div> </body> </html>
解决方案3
0 2015-08-28 14:40:26
您正在谈论在选中单选按钮时触发事件，然后调用回调函数： https : //api.jquery.com/checked-selector/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.