Toggling the opacity of large number of elements with JavaScript or jQuery -

i'm building huge form requires me show opacity of elements @ 0.5 , when button clicked opacity 1.0. able javascript need manage better not calling if statement each element. note elements in no particular order , need toggle opacity of more 1 element.

working demo need revise

simple css

 [id^="dp"] {     opacity: 0.5; } 

html

group 1<br>     <input type="radio" id="abc1" name="abc1"  onclick="showabc();"/>     <label for="abc1"> yes </label>     <input type="radio" id="abc2" name="abc1"  onclick="showabc();"/>     <label for="abc2"> no </label>     <div id="dpabc1">     <h4>content 1 dimmed</h4>     </div>      group 2<br>     <input type="radio" id="abc3" name="abc2"  onclick="showabc();"/>     <label for="abc3"> yes </label>     <input type="radio" id="abc4" name="abc2"  onclick="showabc();"/>     <label for="abc4"> no </label>     <div id="dpabc7">     <h4>content 2 dimmed</h4>     </div>      group 3<br>     <input type="radio" id="abc5" name="abc3"  onclick="showabc();"/>     <label for="abc5"> yes </label>     <input type="radio" id="abc6" name="abc3"  onclick="showabc();"/>     <label for="abc6"> no </label>     <div id="dpabc9">     <h4>content 3 item 1 in own div</h4>     </div>     <div id="dpabc11">     <h4>content 3 item2 in own div</h4> 

current javascript need rewrite without bunch of if statements each element

function showabc() {              if (document.getelementbyid("abc1").checked == true) {         document.getelementbyid("dpabc1").style.opacity = 1.0;             }              else {         document.getelementbyid("dpabc1").style.opacity = 0.5;               }          if (document.getelementbyid("abc3").checked == true) {         document.getelementbyid("dpabc7").style.opacity = 1.0;             }              else {         document.getelementbyid("dpabc7").style.opacity = 0.5;               }          if (document.getelementbyid("abc5").checked == true) {         document.getelementbyid("dpabc9").style.opacity = 1.0;         document.getelementbyid("dpabc11").style.opacity = 1.0;             }              else {         document.getelementbyid("dpabc9").style.opacity = 0.5;         document.getelementbyid("dpabc11").style.opacity = 0.5;              }                }  

beginning of code revision here's i'm stuck. i'm trying match variables in "checkme" variables in dimme. can see abc1 & 3 need show opacity change of 1 item abc5 needs change opacity 2 items (dpabc9 & dpabc11).

function showabc() {     var checkme = ["abc1" , "abc3" , "abc5" ];     var dimme = ["dpabc1" , "dpabc7" , "dpabc9, dpabc11"];          (var i=0, l=checkme.length; i<l; ++i) {             document.getelementbyid(checkme[i]).style.opacity = 1.0;             }              else {              document.getelementbyid(checkme[i]).style.opacity = 0.5;             }          } 

given minor changes html, appropriate grouping of elements within <fieldset> elements, , use of yes/no values, i'd suggest following javascript:

function opacitytoggle(){     // 'this' refers element event-handling bound:     var divs = this.getelementsbytagname('div'),     // using css syntax offered 'queryselector()' find     // first input element of 'type=radio' , checked:         confirmed = this.queryselector('input[type="radio"]:checked');     // iterates on 'div' elements, , sets opacity according     // whether checked radio input has value of 'yes':     (var = 0, len = divs.length; < len; i++) {         divs[i].style.opacity = confirmed.value === 'yes' ? 1 : 0.5;     } }  // gets fieldset elements: var fieldsets = document.getelementsbytagname('fieldset');  // iterates on fieldset elements: (var = 0, len = fieldsets.length; < len; i++) {     // , uses 'addeventlistener' add listener 'change' event,     // when event detected, opacitytoggle function called:     fieldsets[i].addeventlistener('change', opacitytoggle); } 

js fiddle demo.

this works on following html:

<fieldset>     <legend>group 1</legend>     <input type="radio" id="abc1" name="abc1" value="yes" />     <label for="abc1">yes</label>     <input type="radio" id="abc2" name="abc1" value="no" />     <label for="abc2">no</label>     <div id="dpabc1">        <h4>content 1 dimmed</h4>     </div> </fieldset>  <fieldset>     <legend>group 2</legend>     <input type="radio" id="abc3" name="abc2" value="yes" />     <label for="abc3"> yes </label>     <input type="radio" id="abc4" name="abc2" value="no" />     <label for="abc4"> no </label>     <div id="dpabc7">         <h4>content 2 dimmed</h4>     </div> </fieldset>  <fieldset>     <legend>group 3</legend>     <input type="radio" id="abc5" name="abc3" value="yes" />     <label for="abc5"> yes </label>     <input type="radio" id="abc6" name="abc3" value="no" />     <label for="abc6"> no </label>     <div id="dpabc9">         <h4>content 3 item 1 in own div</h4>     </div>     <div id="dpabc11">         <h4>content 3 item2 in own div</h4>     </div> </fieldset>