input[type="checkbox"]:checked does not work in IE8

Question

I know I have already asked this question here . But since I dint find the solution there. I am re-posting the same question. Kindly bear with me.

Please find the fiddle here.

HTML:

<label>
<input type="checkbox" id="" class="checkbox" name="Hello"><span>Hello</span>
</label>

CSS:

label {
display: block;
width: 85%;
font: normal 12px/1.6em Arial;
}
.correctPadding .checkbox {
margin: 0;
display: inline;
margin-right: 6px;
margin-top:2px;
}
input[type="checkbox"]:checked + span {
font-weight: bold;
}

My JS trial is:

if ($('.checkbox').is(':checked')) {
    $(this).next().css({ "font-weight": "bold" })
}

The check box label should get bold, when a check box is checked. It is working in all browsers, except for IE8.

Can we solve this please

IE8 doesn't support (doesn't know) `:checked` pseudoselector. Use JS, or let span be normal in IE8, not bold. — pavel, Jun 15 '15 at 07:26
possible duplicate of [How can I get a css pseudo element :checked to work in IE8 without Javascript?](http://stackoverflow.com/questions/17869547/how-can-i-get-a-css-pseudo-element-checked-to-work-in-ie8-without-javascript) — gopalraju, Jun 15 '15 at 07:27
@Dmitriy: why to download whole library, when it's possible with two lines or pure JS? — pavel, Jun 15 '15 at 07:30
Don't repost your question. Edit the existing one if you have additional information. — thomaux, Jun 15 '15 at 07:57
@Anzeo: I will do that from next time. I dint know if that would work. — Archana, Jun 15 '15 at 08:09
@panther: Please find my updated question for JS snippet. And that's not working in any browsers now. — Archana, Jun 15 '15 at 08:33

score 0 · Answer 1 · answered Jun 17 '15 at 05:38

maybe so

$(document).ready(function(){
   $('input[type="checkbox"]').each(function(){
    if(/span/i.test($(this).next()[0].tagName) && this.name){
     $(this).change(function(){
      $('input[type="checkbox"][name="'+this.name+'"]').each(function(){
       $(this).next()[this.checked?"addClass":"removeClass"]("Checked");
      });
     });
     if(this.checked) $(this).next().addClass("Checked");
    }
   })
  });

label {
    display: block;
    width: 85%;
    font: normal 12px/1.6em Arial;
}
.correctPadding .checkbox {
    margin: 0;
    display: inline;
    margin-right: 6px;
    margin-top:2px;
}
input[type="checkbox"]:checked + span {
    font-weight: bold;
}
.Checked{
 font-weight: bold;
 color: #f00; /*for example*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<label>
    <input type="checkbox" id="" class="checkbox" name="Hello"><span>Hello</span>
</label>
    <label>
    <input type="checkbox" id="" class="checkbox" name="Hello"><span>Hello 2</span>
</label>
        <label>
    <input type="checkbox" id="" class="checkbox" name="Hello"><span>Hello 3</span>
</label>
            <label>
    <input type="checkbox" id="" class="checkbox" name="Hello"><span>Hello 4</span>
</label>

Archana · Answer 2 · 2015-06-17T06:25:30.280

0

This is as simple as this:

$(".checkbox").change(function () {
    if ($(this).next().hasClass("checkboxSpanTextBold")) {
        $(this).next().removeClass("checkboxSpanTextBold");
    }
    else {
        $(this).next().addClass("checkboxSpanTextBold");
    }
});

CSS:

.checkboxSpanTextBold {
font-weight:bold;
}

Using change will do things for me.

Thanks everyone for your supporting.

edited Jun 17 '15 at 06:25

answered Jun 17 '15 at 06:19

Archana

253
7
25

input[type="checkbox"]:checked does not work in IE8

2 Answers2