How to use “for” attribute in a foreach loop
Question
I have a custom radio button in my project. The problem is this button will not work in a web form which is in a for loop. Because these use "for" attribute to select the unique id of the input field. But for my project I need these radio button to work in a foreach loop. I have tried doing it but can't find a solution.Is there is some way in javascript I can do this?
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,900); * { box-sizing: border-box; } @media (max-width: 40em) { .button-wrap { margin-top: -1.5em; } } .button-label { display: inline-block; padding: 0.5em 1.5em; margin: 0.5em; cursor: pointer; color: #292929; border-radius: 0.25em; background: #efefef; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.22); -webkit-transition: 0.3s; transition: 0.3s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .button-label h1 { font-size: 1em; font-family: "Lato", sans-serif; margin-top:10px; font-weight: 700; } .button-label:hover { background: #d6d6d6; color: #101010; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.32); } .button-label:active { -webkit-transform: translateY(2px); transform: translateY(2px); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0px -1px 0 rgba(0, 0, 0, 0.22); } @media (max-width: 40em) { .button-label { padding: 0em 1em 3px; margin: 0.25em; } } #yes-button:checked + .button-label { background: #2ECC71; color: #efefef; } #yes-button:checked + .button-label:hover { background: #29b765; color: #e2e2e2; } #no-button:checked + .button-label { background: #D91E18; color: #efefef; } #no-button:checked + .button-label:hover { background: #c21b15; color: #e2e2e2; } .hidden { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <body> <input class="hidden radio-label" type="radio" name="optradio" value="strongPositive" id="yes-button"/> <label class="button-label" for="yes-button"><h1>option</h1></label> <input class="hidden radio-label" name="optradio" value="meduimPositive" type="radio" id="no-button"/> <label class="button-label" for="no-button"><h1>option2</h1></label> </body> </head> </html>
1 answers
solution1
2 ACCPTED 2018-04-23 20:50:06
You don't need id s. If you wrap the <input> in the <label> , the <label> will automatically associate to the <input> .
<label><input type="radio" name="test" value="1"> Text 1</input></label> <label><input type="radio" name="test" value="2"> Text 2</input></label>
See MDN's <label> Usage Notes :
- A
<label>can be associated with a control either by placing the control element inside the<label>element, or by using the for attribute. Such a control is called the labeled control of the label element. One input can be associated with multiple labels.
If you do find a reason that you absolutely must have an id (maybe additional aria attributes), I suggest that you create a static index variable that you increment and assign as you instantiate new instances of your widgets. This is the pattern that I usually follow and is also the pattern that Dojo follows.
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.