stackoom
  简体   繁体   中英

How can I run a function when a radio is selected and I click a button?

 原文  2015-08-28 14:28:51  8   3    javascript/ jquery/ html

Question

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. Any help is appreciated.

Thanks in advance.

check it on liveweave

PS: Your browser should have WebStorage support 

 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 answers

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

solution2
 1 ACCPTED  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>

solution3
 0  2015-08-28 14:40:26

您正在谈论在选中单选按钮时触发事件，然后调用回调函数： https : //api.jquery.com/checked-selector/

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question how can i get the value of selected radio button if i click the select button and pass its value in a textbox? how can i do a function when radio button is not checked How do I change which radio button is selected using a function? How can I change the background color when I click on a radio button How do I add class to label when radio button is selected? how can i store a selected radio button in an array? How can I check if a radio button is selected using JavaScript and PHP How can I update select options based on selected radio button? How can I know which radio button is selected via jQuery? How can I store a selected radio button's text in localStorage?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM