CODEWITHSUNDEEP
htmlcheckbox
chuckieDub
chuckieDub

Reputation: 1835

checked="checked" not working in chrome

<input type="checkbox" name="Type[]" value="Red" checked="checked" /><span class="space-right">Red</span>

Properly sets checkbox to checked in firefox and safari but not chrome. Can't find any info about this online.

Anyone know how to fix this?

Have also tried the naked checked as well as checked="true"

Not looking for a js solution, thank you.

Edit: The answer by taco below describes what the issue was. When using forms and input elements, the elements must be properly nested in <td></td> tags or the checked="checked" has no effect. Here is an example of a jsfiddle that proves this to be true on chrome 29.0.1547.57: http://jsfiddle.net/LnL7b/

Upvotes: 26

Views: 113222

Answers (9)

Homelander
Homelander

Reputation: 21

The problem with Chrome and nested radio elements outside the form tag having bugs. Consider using input radio or others inside form tag

Upvotes: 2

Đ&#224;o Thiện T&#226;m
Đ&#224;o Thiện T&#226;m

Reputation: 21

You provided a 'checked' prop to a form field without an 'onChange' handler. This will render a read-only field. If the field should be mutable use 'defaultChecked'. Otherwise, set either 'onChange' or 'readOnly'.

Upvotes: 2

Umesh Patil
Umesh Patil

Reputation: 4958

@Abhay's answer worked for me, I dont know why people negative marking it. I had 2 radio groups sharing same name like below,

  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other

Then again at the bottom of the page,

  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other

So what happening was browser's getting ambiguity and it was selecting only the bottom one not the upper one.

Hope this will help someone.

Enjoy ;)

Upvotes: 6

MVC
MVC

Reputation: 21

If you have html like this:

<input type="checkbox" name="email">
<input type="checkbox" name="email">
<input type="checkbox" name="email" checked>

Then no one will be checked, due to name conflicts.

Upvotes: -1

taco
taco

Reputation: 1383

I was able to replicate this issue on Google Chrome Version 28.0.1500.95.

<table>
  <tr>
    <td>test</td>
    <input type="radio" name="foo" value="bar" checked="checked">
  </tr>
</table>

I broke the table by improperly nesting a radio button. This somehow causes Google Chrome to not mark the input radio as checked.

jsfiddle example - broken and jsfiddle example - working

Upvotes: 30

NguyenHuy
NguyenHuy

Reputation: 31

Try with tag DIV

<div><input type="checkbox" name="ckkhuyenmai" id="ckkhuyenmai" checked>KHUYENMAI</div>

It will be fine.

Upvotes: 3

Abhay
Abhay

Reputation: 321

Checked="checked" works fine in Chrome. Ensure that there are not multiples of same name. Also check for hidden ones.

Upvotes: 0

2D3D4D
2D3D4D

Reputation: 131

checked="checked" works fine in Chrome. Make sure you are not having any other issues. Any invalid HTML. No inline element containing block-level elements?

Upvotes: 3

Head
Head

Reputation: 568

i know you said you weren't looking to use it but jquery is an option:

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<form>
  <p>
    <input type="checkbox" name="newsletter" value="Hourly" checked="checked">

    <input type="checkbox" name="newsletter" value="Daily">
    <input type="checkbox" name="newsletter" value="Weekly">

    <input type="checkbox" name="newsletter" value="Monthly" checked>
    <input type="checkbox" name="newsletter" value="Yearly">
  </p>
</form>
<div></div>

<script>
var countChecked = function() {
  var n = $( "input:checked" ).length;
  $( "div" ).text( n + (n === 1 ? " is" : " are") + " checked!" );
};
countChecked();

$( "input[type=checkbox]" ).on( "click", countChecked );
</script>

</body>
</html>

http://jsfiddle.net/HnEgT/

Hope this helps some what.

Upvotes: -1

Related Questions