JQuery switches - choose only one?

Question

This is probably a stupidly simple question, but I'm stuck.

I created a form with several flags, and when these flags were clicked, it passed the values ​​of each flag in the form of a comma-separated list to a hidden input field. It worked. but due to some problems, I now have to change my code to use radio buttons instead - so the list of values ​​separated by commas is just one at a time.

I changed the code to change it to switches, and it works fine, except for two things: 1) it does not switch between the switches (every time I select a button, it remains selected when I select the others) and 2) adding to the list instead of returning the selected single option. In other words, it still acts as a flag, except visually, it is round and has a dot. Lol

This is my code:

jQuery(document).ready(function($) { $(':radio').click(function() { var radio = $(this); var text = $('input[name="cat"]'); if(radio.is(':checked')) { text.val(text.val() + radio.val()); //alert(text.val()); } else { text.val(function() { $(this).val().replace(radio.val(),""); }); } }); }); 

therefore, when I uncomment this line of "alert", I can see what I passed, and just adds to the list instead of replacing it with a new value. Does anyone know how to fix this, so you can choose and transfer only one option? (The above code works fine, like a checkbox. I really think I got the code above somewhere, although I can't remember where!)

EDIT: here is the code that solved the problem and works, (thank you all :)) - maybe this will help someone else in the future.

 `jQuery(document).ready(function($) { $(':radio').change(function() { var radio = $(this); var text = $('input[name="cat"]'); if(radio.is(':checked')) { text.val(radio.val()); //alert(text.val()); } else { text.val(function() { $(this).val().replace(radio.val(),""); }); } }); });` 

Answer 1

This is an easier way to do the same: Assuming the name of the group of radio stations = a

 $("input[name='a']").change(function(){ alert($(this).val()); }); 

For a demo: http://jsfiddle.net/naveed_ahmad/AtrXw/

Answer 2

Radio buttons must have the same name attribute. The id attribute may be different, but the attribute of the name itself allows you to select only one at a time.

Answer 3

Well, you set the value of the text element to the current value plus the value of the selected radio button. To get rid of the previous switch value, you will either have to delete it based on some template, or replace the original text input value somewhere so that you can restore it.

If your switches do not act like switches, it is because you did not give them the same name. How the switches work: among those who have a name, at any time you can choose no more than one.

Answer 4

Your code cannot work with radio boxes because it assumes that you click on a check box to clear the check box. In the case of radio boxes, you do not need to click on the field to uncheck the box, you just select a different radio box, so a function that removes the value of an unchecked field from a hidden field is never called.

Of course, you could change your code to work with radio boxes, but I do not think it is necessary: ​​the default behavior for radio boxes is to transfer the value of the selected field to the server, so you do not have to copy its value to a hidden field.

Answer 5

I think this is what you want:

 jQuery(document).ready(function($) { $(':radio').click(function() { var radio = $(this); var text = $('input[name="cat"]'); removeRadioValues() text.val(text.val()+radio.val()); }); }); function removeRadioValues(){ var tf = $('input[name="cat"]'); var text = tf.val() $(':radio').each(function(){ text = text.replace($(this).val(),''); }); tf.val(text); } 

Answer 6

When you set the name html property in the same way for all radio stations, you can choose only one. The following is an example that I used to configure the switch and select a user-selected value.

Link

• When should the name attribute be used in HTML4 / HTML5?
• Recommended jQuery Templates for 2012

THE CODE

  <script type="text/template" id="cardTemplate"> <TR class=Normal> <TD style="WIDTH: 275px" align=left> <SPAN> LIJO </SPAN> </TD> <TD> <label><input type="radio" name="defaultScanOption" id= "defaultScanOptionCase" value="Case" checked>Case</label> <label><input type="radio" name="defaultScanOption" id= "defaultScanOptionWorkLot" value="WorkLot">WorkLot</label> <label><input type="radio" name="defaultScanOption" id= "defaultScanOptionCutLot" value="CutLot">CutLot</label> <label><input type="radio" name="defaultScanOption" id= "defaultScanOptionMoonrock" value="Moonrock">Moonrock</label> </TD> </TR> </script> $(document).ready(function () { //Add Scan Type radio buttons as a table row var cardTemplate = $("#cardTemplate").html(); $('#tblPlantParameters tr:last').after(cardTemplate); //When Scan Type radio button selection change, set value in hidden field $('input[name=defaultScanOption]:radio').change(function() { var selectedOptionValue = $(this).val(); alert(selectedOptionValue); $('#hidSelectedScanOption').val(selectedOptionValue); }); //Set the Scan Type radio button if it has a value other than default var existingDefaultScanType = document.getElementById('hidExistingScanOption').value; alert(existingDefaultScanType); if(existingDefaultScanType != null && existingDefaultScanType != "") { $("input[name=defaultScanOption][value="+existingDefaultScanType+"]").attr('checked', true); } });