रेडियो क्लिक होने पर पृष्ठभूमि का रंग बदलें

Question

मैं एक ब्लॉक के पृष्ठभूमि रंग को बदलने की कोशिश कर रहा हूं जब एक रेडियो बटन, जो ब्लॉक के भीतर है, क्लिक किया जाता है।

मैंने यह किया लेकिन मुझे समझ में नहीं आता कि यह क्यों काम नहीं करता है। यहाँ कोड है:

$(document).ready(function() {
    $('#rad').click(function() {
        $('#label').addClass('radio-active');
    });
});

.radio-active {
    background-color: black;
    color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="radio-item" id="label">
      <input id="rad" type="radio" name="rad" >
      <label class="radio-label"for="f-option">£25</label>
  </li>
</ul>

धन्यवाद

jquery html css

1

BeeLee 31 अगस्त 2017, 17:49

Answer 1

जैसा कि अन्य ने उल्लेख किया है, ऐसा लगता है जैसे आप सीएसएस को <style> टैग में लपेटना भूल गए हैं।

मैंने आपके jQuery को वेनिला जेएस में फिर से लिखा है - चूंकि यह अपेक्षाकृत सरल कार्य है जिसे आप प्राप्त करने का प्रयास कर रहे हैं, वेनिला क्यों नहीं जाते? :-)

document.querySelector("#rad").addEventListener("change", function() {
    var label = document.getElementById("label");
    label.classList.add("radio-active");
});

.radio-active {
    background-color: black;
    color: white;
}

<ul>
  <li class="radio-item" id="label">
      <input id="rad" type="radio" name="rad" >
      <label class="radio-label"for="f-option">£25</label>
  </li>
</ul>

1

David Wilkinson 31 अगस्त 2017, 18:26

Answer 2

यह सीएसएस कोड डालें:

.radio-active {
    background-color: black;
    color: white;
}

style टैग के साथ जैसे:

<style>
.radio-active {
    background-color: black;
    color: white;
}
</style>

2

Mayank Pandeyz 31 अगस्त 2017, 18:03

Answer 3

मुझे लगता है कि आप अपने सीएसएस वर्ग के आसपास <style> टैग खो रहे थे। क्योंकि आपका कोड काम कर रहा है:

$(document).ready(function() {
  $('#rad').click(function() {
    $('#label').addClass('radio-active');
  });
});

.radio-active {
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="radio-item" id="label">
    <input id="rad" type="radio" name="rad" >
    <label class="radio-label"for="f-option">£25</label>
</li>

1

hallleron 31 अगस्त 2017, 17:52

Answer 4

यह यहाँ पूरी तरह से काम करता है ...

क्या आप jQuery को सही तरीके से कॉल कर रहे हैं?

<style>
.radio-active {
    background-color: black;
    color: white;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
    $('#rad').click(function() {
        $('#label').addClass('radio-active');
    });
});
</script>

<ul>


<li class="radio-item" id="label">
    <input id="rad" type="radio" name="rad" >
    <label class="radio-label"for="f-option">£25</label>
</li>

<li class="2radio-item" id="label2">
    <input id="rad2" type="radio" name="rad2" >
    <label class="radio-label2"for="f-option2">£35</label>
</li>

</ul>

छवि अपलोड

0

Bruno Mosciatti G. Maciel 31 अगस्त 2017, 17:57

रेडियो क्लिक होने पर पृष्ठभूमि का रंग बदलें

4 जवाब

संबंधित सवाल

नए सवाल

jquery