Link within Label doesn't set focus on attributed input
Question
I'm working on a One Pager website where I have a navigation menu. I'd want to have radio input associated to the clicked a , in order to apply some CSS to the active radio .
As you will see, the CSS is applied when I click on the radio , but not when I click on the link. I know I could do this using JavaScript, but I am trying to avoid growing my code base.
The second section of the snippet is what I'd want to achieve, but with an a tag in the label . The radio will be hidden, so clicking on the radio isn't an acceptable answer. How can I make the a tag and the input tag activate?
input[type=radio]:checked + label { color:red; background-color:green; } .working { visibility: hidden; width:0; }
<html> <body> <div> <h2>Not working with a tag</h2> <div> <input id="a" type="radio" name="menu1" value="a"/> <label for="a"><a href="#">Input 1</a></label> </div> <div> <input id="b" type="radio" name="menu1" value="b"/> <label for="b"><a href="#">Input 2</a></label> </div> </div> <div> <h2>Expected result (without a, it doesn't work)</h2> <div> <input class="working" id="c" type="radio" name="menu2" value="a"/> <label for="c">Input 1</label> </div> <div> <input class="working" id="d" type="radio" name="menu2" value="b"/> <label for="d">Input 2</label> </div> </div> </body> </html>
2 answers
solution1
1 2016-01-27 10:39:35
Right solution is here , try this.
<script type="text/javascript">
$(document).ready(function(){
$('[name=title_format]').click(function() {
$('[name=doc-title]').val('Title changed to '+$(this).val());
});
});
</script>
<style>
input[type=radio]:checked + label {
color:red;
background-color:green;
}
.working {
width:0;
}
</style>
<div>
<h2>Not working with a tag</h2>
<div>
<a href="#">
<input type="radio" name="title_format" class="title-format" id="title-format-0" value="0" checked="checked"> <label for="title-format-0">Input 1</label>
</a>
</div>
<div>
<a href="#">
<input type="radio" name="title_format" class="title-format" id="title-format-1" value="1">
<label for="title-format-1">Input 2</label>
</a>
</div>
</div>
<div>
<h2>Expected result (without a, it doesn't work)</h2>
<div>
<input class="working" id="c" type="radio" name="menu2" value="a"/>
<label for="c">Input 1</label>
</div>
<div>
<input class="working" id="d" type="radio" name="menu2" value="b"/>
<label for="d">Input 2</label>
</div>
</div>
solution2
0 2016-03-02 20:46:12
Here's a working example of the label syntax: https://jsfiddle.net/93c3sscs/
If you're testing on IE11 or your customers use IE (not sure about Edge and other IE versions), you can't rely on labels to activate inputs. IE does not apply clickable functionality to <label><input></label> , and Microsoft put out 2 updates in the second half of 2015 that completely broke my app because of this by positioning the clickable area 5px above my widget sprites.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.