Best IT Recipes

Radio control "Checked" Attribute not working

The radio button does not appear as checked by default. I started with no default selection, doing a very simple js check, and it didn't work. So I decided to just use the default values ​​until I realized that I had discovered that something strange was happening.

The markup is valid and I tried in FF, Safari and Chrome. Nothing works.

I think this is a conflict with the jQuery library because the problem disappears when I delete the call script.

 <label>Do you want to accept American Express?</label> Yes <input id="amex" style="width: 20px;" type='radio' name='Contact0_AmericanExpress' value='1' /> No <input style="width: 20px;" type='radio' name='Contact0_AmericanExpress' class='check' value='0' checked="checked" />
+64
html radio-button forms
Aug 31 '10 at 6:57
source share
13 answers

If you have several identical names with the checked attribute, the last checked radio will be installed on the last page.

 <form> <label>Do you want to accept American Express?</label> Yes<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress" /> maybe<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress" checked="checked" /> No<input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked="checked" /> </form>
+80
Apr 05 2018-11-18T00:
source share

It could be like this:

Is there a bug with switches in jQuery 1.9.1?

In short: do not use attr (), but prop () to test the switches. God i hate js ...

+33
Sep 10 '13 at 10:02
source share

The radio inputs must be inside the form in order to "test" for work.

+13
Jan 30 '17 at 19:21
source share

The ultimate JavaScript solution for this annoying problem is

Just wrap the jQuery command in setTimeout . The interval can be very small, I use 10 milliseconds and it works fine. The delay is so small that it is almost not detected by end users.

 setTimeout(function(){ $("#radio-element").attr('checked','checked'); },10);

This will also work with

  • $("#radio-element").trigger('click');
  • $("#radio-element").attr('checked',true);
  • $("#radio-element").attr('checked',ANYTHING_THAT_IS_NOT_FALSE);

Hackies ... Hackies ... Hackies ... Hackies ... Yes, I know ... this is a workaround from here ....

+11
May 24 '12 at 13:06
source share

Hey, I also ran into a similar issue on the generated ajax page. I took the generated source using the Webdeveloper pluggin in FF, and checked all the inputs in the form and found that in the hidden div (another checkbox): none) with the same identifier, as soon as I changed the identifier of the second checkbox, it started working .. You can also try this .. and let me know the result .. cheers

+5
Oct 19 '11 at 6:10
source share

Just copied your code to: http://jsfiddle.net/fY4F9/

No by default. Do you have javascript work that will affect the radio channel?

+3
Aug 31 '10 at 7:02
source share

The jQuery documentation contains a detailed description of the checked vs. attribute.

Accordingly, this is another way to get the selected switch value.

 var accepted = $('input[name="Contact0_AmericanExpress"]:checked').val();
+2
Jul 08 '16 at 17:24
source share

hi I think that if you put the id attribute for the second input and assign it a unique id value, it will work

 <label>Do you want to accept American Express?</label> Yes<input id="amex" style="width: 20px;" type='radio' name='Contact0_AmericanExpress' value='1'/> No<input style="width: 20px;" id="amex0" type='radio' name='Contact0_AmericanExpress' class='check' value='0' checked="checked"/>
+1
Jan 06 2018-12-22T00:
source share

Your code is right, try debugging a jQuery script to find the problem! If you use FF, you can install the extension for debugging JS (and JQuery), which is called FireBug.

0
Aug 31 '10 at 13:28
source share

 **Radio button aria-checked: true or false one at a time** $('input:radio[name=anynameofinput]').change(function() { if (this.value === 'value1') { $("#id1").attr("aria-checked","true"); $("#id2").attr("aria-checked","false"); } else if (this.value === 'value2') {; $("#id2").attr("aria-checked","true"); $("#id1").attr("aria-checked","false"); } });

0
Feb 21 '19 at 19:17
source share

I could repeat this by setting the input tag name equally for the two input groups, as shown below:

 <body> <div> <div> <h3>Header1</h3> </div> <div> <input type="radio" name="gender" id="male_1" value="male"> Male<br> <input type="radio" name="gender" id="female_1" value="female" checked="checked"> Female<br> <input type="submit" value="Submit"> </div> </div> <div> <div> <h3>Header2</h3> </div> <div> <input type="radio" name="gender" id="male_2" value="male"> Male<br> <input type="radio" name="gender" id="female_2" value="female" checked="checked"> Female<br> <input type="submit" value="Submit"> </div> </div> </body>

(Click here to see it work)

The following two solutions both solve the problem:

  1. Use different names for inputs in the second group
  2. Use the form tag instead of the div tag for one of the groups (I really can’t understand the real reason why this would solve the problem. I would like to hear some opinions on this!)
0
May 15 '19 at 22:45
source share

just add a verified attribute for each radio you want to set as default

try the following:

 <input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked/>
-one
Jan 26 '14 at 14:22
source share

You are using non-standard xhtml code (values ​​must be enclosed in double quotes, not single quotes)

Try the following:

 <form> <label>Do you want to accept American Express?</label> Yes<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress" /> No<input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked="checked" /> </form>
-2
Aug 31 '10 at 7:06
source share


More articles:


All Articles