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

Question

我一直在使用以下代码根据选中的单选按钮更改<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>

Answer 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);

    }
});

拨弄这个

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

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

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

});

拨弄这个

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-04-08 10:09:36

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-04-08 10:09:36

解决方案1
0 已采纳 2014-04-08 10:09:36