改變顏色時，自定義單選按鈕被選中

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

改變顏色時，自定義單選按鈕被選中

回答

相關問題