单击单选按钮时更改段落的类别答案

【问题标题】：Change the class of paragraph when radio button is clicked单击单选按钮时更改段落的类别
【发布时间】：2023-03-16 17:17:02
【问题描述】：

我一直在使用以下代码来更改 <p> 的颜色，具体取决于选中的单选按钮。我一直在使用红色和蓝色两个类，但它不起作用。

请帮帮我。

<html>
<head>
<script type="text/javascript">

var ele = document.getElementsByName('color');


    if (ele[0].checked) { //index has to be j.
          $("p").toggleClass("blue");
    }
    else {
            $("p").toggleClass("red");
    }


</script>

<style type="text/css">

.blue
{
color:blue;
}
.red
{
color:red;  
}
</style>

</head>

<body>

<input type="radio" name="color" value="blue">blue<br>

<input type="radio" name="color" value="red">red


<p>When a user clicks on a radio-button, it becomes checked, and all other radio-buttons         with equal name become unchecked.</p>



</body>
</html>

【问题讨论】：

标签： javascript html css radio-button dom-events

【解决方案1】：

因此，您的 javascript 将在您的元素存在于 DOM 之前执行。您应该将 javascript 代码放在正文的最后，或者将其包含在加载文档时触发的事件处理程序中。

HTML：

<input type="radio" name="color" value="blue">blue<br>
<input type="radio" name="color" value="red">red
<p id="myParagraph">When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p>

在香草 JS 中：

document.addEventListener('DOMContentLoaded', function() {

   var radioButtons = document.getElementsByName('color');
   var paragraph = document.getElementById('myParagraph');

    for(var i=0;i< radioButtons.length;i++)
    {
        var elem = radioButtons[i];
        elem.addEventListener('change',function(e){     
            console.log(paragraph);
            if(paragraph.className)
                paragraph.className = this.value;
            else
                paragraph.classList.add(this.value);
        }
        ,false);

    }
});

Fiddle of this

或者，如果您使用 jQuery 并将其正确包含在您的页面中（在您的示例中并非如此）：

$('document').ready(function() {

    $('input:radio').on('change',function(){
        $('#myParagraph').addClass(this.value);
    });

});

Fiddle of this

【讨论】：