मेरे पास रेडियो बटन का एक समूह है, और सबमिट बटन है। जब मैं सबमिट बटन पर क्लिक करता हूं तो एक संदेश मुझे बताता है कि मैंने किस रेडियो बटन पर क्लिक किया है। मैं अब जो करना चाहता हूं वह चयनित रेडियो बटन का रंग बदलना है, मैं इसे कैसे कर सकता हूं? मैंने सफलता के बिना कई चीजों की कोशिश की है। यहाँ कोड है

function selectedButton() {
  const optionContainer = document.querySelectorAll(".one");
  for (var i = 0; i < optionContainer.length; i++) {
    if (optionContainer[i].checked) {
      document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
    }
  }
}
<input type="radio" name="gender" class="one" value="Male" />Male <br>
<input type="radio" name="gender" class="one" value="Female" />Female<br>
<input type="radio" name="gender" class="one" value="Other" />Other<br>
<div id="display"> </div>
<button onclick="selectedButton()">Submit</button>
0
Douk 23 अक्टूबर 2019, 12:25

3 जवाब

सबसे बढ़िया उत्तर

आप रेडियो बटन को div में लपेट सकते हैं और फिर चुने जाने पर CSS क्लास लागू कर सकते हैं। फिर, अपने सीएसएस में, आप आवश्यक शैलियों को परिभाषित कर सकते हैं।

function selectedButton() {
  const optionContainer = document.querySelectorAll(".one");
  for (var i = 0; i < optionContainer.length; i++) {
    if (optionContainer[i].checked) {
      optionContainer[i].parentElement.classList.add('selected');
      document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
    } else {
      optionContainer[i].parentElement.classList.remove('selected');
    }
  }
}
.selected {
  color: Red;
}
<div>
  <input type="radio" name="gender" class="one" value="Male" />Male
</div>
<div>
  <input type="radio" name="gender" class="one" value="Female" />Female
</div>
<div>
  <input type="radio" name="gender" class="one" value="Other" />Other
</div>
<div id="display"> </div>
<button onclick="selectedButton()">Submit</button>
0
Nidhin Joseph 23 अक्टूबर 2019, 09:30
 function selectedButton() {
        const optionContainer = document.querySelectorAll(".one");
        for (var i = 0; i < optionContainer.length; i++) {
            if (optionContainer[i].checked) {
                document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
                optionContainer[i].style.backgroundColor = "red";
            }
            else {
                optionContainer[i].style.backgroundColor = "";
            }
        }
    }
0
Nasira Mohamed Noufal 23 अक्टूबर 2019, 09:57

आप पूरे इनपुट तत्व को एक अवधि में संलग्न कर सकते हैं और parentNode का उपयोग करके पूरे रेडियो बटन का रंग बदल सकते हैं

function selectedButton() {
  const optionContainer = document.querySelectorAll(".one");
  for (var i = 0; i < optionContainer.length; i++) {
    if (optionContainer[i].checked) {
      document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
      optionContainer[i].style.backgroundColor = "blue";
      optionContainer[i].parentNode.style.backgroundColor = "blue";
      optionContainer[i].parentNode.style.color = "yellow"
    } else {
      optionContainer[i].style.backgroundColor = "";
      optionContainer[i].parentNode.style.backgroundColor = "";
      optionContainer[i].parentNode.style.color = ""
    }
  }
}
<span><input type="radio" name="gender" class="one" value="Male" />Male</span> <br>
<span><input type="radio" name="gender" class="one" value="Female" />Female</span><br>
<span><input type="radio" name="gender" class="one" value="Other" />Other</span><br>
<div id="display"> </div>
<button onclick="selectedButton()">Submit</button>

आप लेबल को स्पैन में संलग्न कर सकते हैं और nextSibling का उपयोग करके उन्हें रेडियो बटन से रंग सकते हैं

function selectedButton() {
  const optionContainer = document.querySelectorAll(".one");
  for (var i = 0; i < optionContainer.length; i++) {
    if (optionContainer[i].checked) {
      document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
      optionContainer[i].style.backgroundColor = "blue";
      optionContainer[i].nextSibling.style.backgroundColor = "blue";
      optionContainer[i].nextSibling.style.color = "yellow"
    } else {
      optionContainer[i].style.backgroundColor = "";
      optionContainer[i].nextSibling.style.backgroundColor = "";
      optionContainer[i].nextSibling.style.color = ""
    }
  }
}
<input type="radio" name="gender" class="one" value="Male" /><span>Male</span> <br>
<input type="radio" name="gender" class="one" value="Female" /><span>Female</span><br>
<input type="radio" name="gender" class="one" value="Other" /><span>Other</span><br>
<div id="display"> </div>
<button onclick="selectedButton()">Submit</button>
0
ellipsis 23 अक्टूबर 2019, 09:49