Java语言边框颜色在单选按钮单击时未更改

Question

很抱歉提出一个问题，我相信很多人会认为这是非常基本的，但是我并不真正了解javascript，并且随着我的应用程序的发展，我正在学习

我有以下

当单击单选按钮时，我希望class="teams"的div将边框颜色更改为红色。

我想出了这段代码

<label><input type="radio" onclick="return border()" name="picks['.$x.']" id="one" value="'.$row['team1'].'"><span>'.$team1.'</span></label><br />
<label><input type="radio" onclick=" return border()" name="picks['.$x.']" id="two" value="'.$row['team2'].'"><span>'.$team2.'</span></label><br />
<label><input type="radio" onclick="return border()" name="picks['.$x.']" id="three" value="draw"><span>Draw</span></label><br />
</center>';

function border(){
    if(document.getElementById("one").checked){ 
        document.getElementById("teams").style.borderColor="red"
    }

    else if( document.getElementById("two").checked){
        document.getElementById("teams").style.borderColor="red"
    }
}

echo'<div class="teams">';
echo'<img src="images/teams/'.$src1.'.png" id="t1" />'; 
echo'<img src="images/teams/'.$src2.'.png" id="t2" />'; 
echo'</div>';

显然我做错了。 任何帮助将不胜感激

以下是引发的错误。

Answer 1

teams是类属性，而不是 ID。

将getElementById("teams")更改为getElementsByClassName("teams")

请注意， getElementsByClassName("teams")返回匹配元素的数组； 因此，请使用循环设置每个值的值，或仅使用getElementsByClassName("teams")[0].style.borderColor

---

function border() {
    var el = document.getElementsByClassName("teams")[0];
    if (document.getElementById("one").checked || document.getElementById("two").checked) { 
        el.style.borderColor = "red";
        el.style.borderStyle = "solid";
    }
}

Answer 2

尝试onclick="border(this.id)"

 <labe><input type="radio" onclick="border(this.id)" name="picks['.$x.']" id="one" value="'.$row['team1'].'"><span>'.$team1.'</span></label><br />
 <label><input type="radio" onclick=" border(this.id)" name="picks['.$x.']" id="two" value="'.$row['team2'].'"><span>'.$team2.'</span></label><br />


function border(id){
    if(document.getElementById(id).checked){ 
        document.getElementsByClassName('teams')[0].style.borderColor="red"
        }
    }

工作演示

Answer 3

在您的代码teams是一个类名而不是id。

echo'<div class="teams">';

您可以将其更改为id：

echo'<div id="teams">';

或使用getElementsByClassName("teams") ，它将为您提供NodeList

document.getElementsByClassName("teams")[0].style.borderColor="red";

除此之外，您还可以仅使用css伪尝试此​​解决方案：

 input[type=radio].check { display: none; } input[type=radio].check + label.check { border: 1px solid grey; padding: 5px 7px; cursor: pointer; width: 150px; display: block; text-align: center; margin-bottom: 2px; } input[type=radio].check:checked + label.check { background: red; } 

 <input type='radio' name='team' value='Team 1' class='check' id='check1' /> <label for='check1' class='check'>Team 1</label> <input type='radio' name='team' value='Team2' class='check' id='check2' /> <label for='check2' class='check'>Team 2</label> <input type='radio' name='team' value='Draw' class='check' id='check3' /> <label for='check3' class='check'>Draw</label> 

Answer 4

只需提供一些提示，我就可以尝试避免使用onclick事件，而转向使用外部javascript。

我创建了一个您可以尝试的示例。

 $(':radio').change(function () { if ($(this).val() == "team1") { $(".row").css("border-color", "blue"); } else if ($(this).val() == "team2") { $(".row").css("border-color", "red"); } }); 

 div.row { border: 2px solid black; height: 200px; width:200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="row"> </div> <label for="team1">1</label> <input id="team1" type="radio" name="team1" value="team1"> <label for="team2">2</label> <input id="team2" type="radio" name="team2" value="team2">