改变颜色时，自定义单选按钮被选中

这是我下面的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>

这是我自定义单选按钮

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; 
}

如何使用CSS Jquery改变车间颜色id="workshopcl"当我检查车间单选按钮

所以请你们帮我一下

来源

2014-04-08 terminator

试试这个方法，所有的三个复选框选中它会工作，并添加背景，标题

$('input').on('change', function() { 
    if ($(this).is(':checked')){ 
     var dt = $(this).data('title') 
     $('h2 a').css('background-color', 'white') 
     $('#' + dt).css('background-color', 'red') 
     console.log(dt) 
    } 
})

DEMO

来源

2014-04-08 11:18:37

谢谢很多这项工作很好按钮 – terminator

@ user2963346如果它可以帮助接受答案，很高兴帮助:-) –

非常感谢这很好的工作。但我该怎么做，通过添加在CSS – terminator

的onclick事件添加到单选按钮，如：

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

写js函数，如：

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

这将增加CSS的元素id为workshopcl。

来源

2014-04-08 11:11:05 Jenz

在纯CSS选择器是：

#workshops:checked ~ div #workshopcl {color:red;}

你可以在你的jQuery 如果你设置了DIV容器此ID使用此选择，您可以选择对话框中的任何孩子的：可以选择从类容器太： http://codepen.io/gc-nomade/pen/Cmrxj/

#workshops:checked ~ div#workshopcl, 
#workshops:checked ~ div#workshopcl a, 
#courses:checked ~ div.coursescl , 
#courses:checked ~ div.coursescl a, 
#exclusive:checked ~ div.exclusivecl , 
#exclusive:checked ~ div.exclusivecl a 
{color:red;}

HTML车间变为：

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

来源

2014-04-08 11:13:07

试试这个

$('#workshops').on('click',function(){ 
    if ($(this).is(':checked')) 
     $('#workshopcl').css('color', 'green'); 
    else 
     $('#workshopcl').css('color', 'black'); 
    });

编码快乐:)

来源

2014-04-08 11:14:50 dreamweiver

改变颜色时，自定义单选按钮被选中

回答

相关问题