If checkbox is checked, apply css to href

Question

My HTML:

<a href="#"">             
    <input type="checkbox" checked="checked">0-3 Months
</a>

I do not have access to the HTML itself (SaaS Environment) to edit the CSS or to add an ID, name, or class. So the logic must be if any checkbox is checked.

Thank you.

Can you add an event to input, like onclick, and when it is fired, you change the class of tag a? — patricK, Sep 05 '14 at 22:55
Your HTML is invalid. You cannot have an input inside an anchor. — Quentin, Sep 05 '14 at 22:55

score 0 · Answer 1 · answered Sep 05 '14 at 23:02

0

Something like this? Use jQuery.

$().ready(function() {
    var selected_option = $('#mySelectBox option:selected');

    if(selected_option) {
        // do something
        $('#SOMEELEMENT').css("background-color", "green");
    }
);

answered Sep 05 '14 at 23:02

HelpNeeder

5,933
21
80
141

score 0 · Answer 2 · answered Sep 05 '14 at 23:02

Do you need something like this?

In this simple example, when you click at checkbox it will apply a red background at tag A (href)

  <html>

  <style type="text/css">        
  .myNewCSS {
    background-color: red
  }
  </style>

  <a href="#" class="x">             
      <input type="checkbox" checked="checked" onclick="test(this)"/> 0-3 Months
  </a>

  <script type="text/javascript">
    function test(chk){
      chk.parentNode.className = "myNewCSS";
    }
  </script>

  </html>

Now I realized that you can't change the HTML, so my solution won't work. — patricK, Sep 05 '14 at 23:05

score 0 · Answer 3 · answered Sep 05 '14 at 23:08

0

If you mean apply styles to <a> then it is not possible to do purely with css. You need to use javascript for that

answered Sep 05 '14 at 23:08

jonasnas

3,390
1
17
30

score 0 · Answer 4 · answered Sep 05 '14 at 23:09

0

You can actually select checked inputs with CSS in modern browsers:

input:checked {outline: 2px solid red;}

answered Sep 05 '14 at 23:09

ralph.m

12,558
3
19
29

If checkbox is checked, apply css to href

4 Answers4