javascript - 选中自定义单选按钮时更改另一个 div 中 anchor 标记的颜色

Question

下面是我的 HTML 代码:

<input type="radio" name="form-radio" id="workshops" value="high" checked>
<label id="workshoping" for="workshops">Workshops</label><br>
<input type="radio" name="form-radio" id="courses" value="option2">
<label for="courses">Courses</label><br>
<input type="radio" name="form-radio" id="exclusive" value="option3">
<label for="exclusive">Exclusivess</label><br>

<div class="col-lg-4 col-md-4 col-sm-4">
    <H2><a href="#" id="workshopcl">WorkShops</a></H2>
    <span>Short Term</span>
    <span>Single Session</span>
</div>

<div class="col-lg-4 col-md-4 col-sm-4 coursescl">
    <H2><a href="#" class="">Courses</a></H2>
    <span>Long Term</span>
    <span>Multi Sessions</span>
</div>

<div class="col-lg-4 col-md-4 col-sm-4 exclusivecl">
    <H2><a href="#" class="">Exclusives</a></H2>
    <span>Skilhippo's Exclusives</span>
</div>

这是自定义单选按钮的 CSS

input[type="radio"] {
    display: none;
    margin-left: 10px;
}

label {
    font-family: $verdana;
    font-size:12px;
    margin-left:13px;
    font-weight: normal;
}

input {
    border: 2px solid $black;
    border-radius:0;
    margin-left:10px;
    margin-top:10px;
    font-size: 10px;
    padding:5px;
    color:$dark_grey;
    @media (min-width: $tablet) and (max-width: $tablet-max) {
        /* Media Query Between Screen 768px and 980px  */ 
        width:124px !important;  
    }
}

input[type="radio"] + label:before {
    background-color: #000000;
    border: 2px solid #000000;
    border-radius: 10px;
    color: #FFFFFF;
    content: "";
    display: inline-block;
    font-size: 13px;
    height: 15px;
    line-height: 9px;
    margin: -3px 8px 0 3px;
    text-align: center;
    vertical-align: middle;
    width: 15px;
} 

input[type="radio"]:checked + label:before {
    content:"\2022";
    text-align: center;
}

.high {
    color:yellow;
}

当我选中研讨会单选按钮时，如何使用 Jquery 更改 id="workshopcl" 中研讨会文本的颜色

所以请帮帮我

Answer 1

向单选按钮添加一个 onclick 事件，例如:

<input type="radio" name="form-radio" id="workshops" value="high" onclick="changecolor()" checked>

像这样编写js函数:

function changecolor()
{
$('#workshopcl').css('color', 'red');
}

这会将 css 添加到 ID 为 workshopcl 的元素。