选择输入（单选按钮）时如何使用javascript / jquery更改按钮的颜色

Question

<div>
 <button id="id1" class="button">button1</button>
 <button id="id2" class="button">button2</button>
 <button id="id3" class="button">button3</button>
</div>
<div>
  <form action="" id="formId1">
   <input type="radio" name="gender" id="id1"  value="male"> Male<br> 
   <input type="radio" name="gender" id="id1"  value="male"> female<br> 
   <input type="radio" name="gender" id="id1"  value="male"> others<br>
  </form>
</div>
<div>
  <form action="" id="formId2">
   <input type="radio" name="gender" id="id2"  value="male"> Male<br> 
   <input type="radio" name="gender" id="id2"  value="male"> female<br> 
   <input type="radio" name="gender" id="id2"  value="male"> others<br>
  </form>
</div>
<div>
  <form action="" id="formId3">
   <input type="radio" name="gender" id="id3"  value="male"> Male<br> 
   <input type="radio" name="gender" id="id3"  value="male"> female<br> 
   <input type="radio" name="gender" id="id3"  value="male"> others<br>
  </form>
</div>

如果以ID为id1的形式选择了ID为formId1的输入，则应该更改ID为id1的按钮的颜色，如果在ID中选择了ID为id2的输入，标识为formId2的表单，则标识为id2的按钮的颜色应更改，并且第三个按钮也应相同。

Answer 1

您可以单击以调用函数来设置按钮颜色，

   <input type="radio" name="gender" id="id1"  onclick="handleClick('id1')"  value="male"> Male<br> 

在此代码中，我们添加了onclick="handleClick('id1')"

handleClick =function(id){

// uncomment if you want to reset other button
/*
for(var i=1 ;i<4;i++){
     var button = document.getElementById("id"+i);
      button.style.backgroundColor = "buttonface";
}*/
     var property = document.getElementById(id);
      property.style.backgroundColor = "red";
 }

<div>
 <button id="id1" class="button">button1</button>
 <button id="id2" class="button">button2</button>
 <button id="id3" class="button">button3</button>
</div>
<div>
  <form action="" id="formId1">
   <input type="radio" name="gender" id="id1"  onclick="handleClick('id1')"  value="male"> Male<br> 
   <input type="radio" name="gender" id="id1"onclick="handleClick('id1')"   value="male"> female<br> 
   <input type="radio" name="gender" id="id1"onclick="handleClick('id1')"  value="male"> others<br>
  </form>
</div>
<div>
  <form action="" id="formId2">
   <input type="radio" name="gender" id="id2" onclick="handleClick('id2')"   value="male"> Male<br> 
   <input type="radio" name="gender" id="id2"  onclick="handleClick('id2')"  value="male"> female<br> 
   <input type="radio" name="gender" id="id2" onclick="handleClick('id2')"   value="male"> others<br>
  </form>
</div>
<div>
  <form action="" id="formId3">
   <input type="radio" name="gender" id="id3" onclick="handleClick('id3')"   value="male"> Male<br> 
   <input type="radio" name="gender" id="id3" onclick="handleClick('id3')"   value="male"> female<br> 
   <input type="radio" name="gender" id="id3" onclick="handleClick('id3')"   value="male"> others<br>
  </form>
</div>

Answer 2

<div>
     <button id="id1" class="button">button1</button>
     <button id="id2" class="button">button2</button>
     <button id="id3" class="button">button3</button>
    </div>
    <div>
      <form action="" id="formId1">
       <label><input type="radio" name="gender" value="male" onchange="setColor('id1')"> Male</label><br> 
       <label><input type="radio" name="gender" value="male" onchange="setColor('id1')"> female</label><br> 
       <label><input type="radio" name="gender" value="male" onchange="setColor('id1')"> others</label><br>
      </form>
    </div>
    <div>
      <form action="" id="formId2">
       <label><input type="radio" name="gender"  value="male" onchange="setColor('id2')"> Male</label><br> 
       <label><input type="radio" name="gender"  value="male" onchange="setColor('id2')"> female</label><br> 
       <label><input type="radio" name="gender" value="male" onchange="setColor('id2')"> others</label><br>
      </form>
    </div>
    <div>
      <form action="" id="formId3">
       <label><input type="radio" name="gender"  value="male" onchange="setColor('id3')"> Male</label><br> 
       <label><input type="radio" name="gender"  value="male" onchange="setColor('id3')"> female</label><br> 
       <label><input type="radio" name="gender"  value="male" onchange="setColor('id3')"> others</label><br>
      </form>
    </div>
    
    <script>
      function setColor(target){
      
        document.getElementById(target).style.backgroundColor = "blue";
        }
      
    </script>