CODEWITHSUNDEEP
javascripthtmlcss
Michael Chuuuuuuuuuuuuuuuuuuuu
Michael Chuuuuuuuuuuuuuuuuuuuu

Reputation: 59

How to use "for" attribute in a foreach loop

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>

Upvotes: 2

Views: 489

Answers (1)

zero298
zero298

Reputation: 26878

You don't need ids. 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.

Upvotes: 3

Related Questions