更改背景顏色選擇

-2

<ul class="article-types"> 
<li class="article-option"> 
    <label class="radio"> 
     <input type="radio" name="optionsRadios" id="first" value="option1"> 
     Lorem 
    </label> 
    <p>Lorem ipsum dolor sit amet</p> 
</li> 
<li class="article-option"> 
    <label class="radio"> 
     <input type="radio" name="optionsRadios" id="second" value="option2"> 
     Ipsum 
    </label> 
    <p>Lorem ipsum dolor sit amet</p> 
</li>

我要的只是改變.article選項來.highlight當單選按鈕檢查。注意有兩個單選按鈕（可以更多），如果選中的收音機未選中，那麼.highlight類必須消失。兩個李永遠不會同時高光。任一個取決於單選按鈕的狀態。

我該如何做到這一點與jQuery？ jsFiddle可以很好。

謝謝。

來源

2013-05-15 Ilham

嘛，你嘗試過什麼？這不是_gimme的code_網站。 – undefined

+你說「jsFiddle可以很好」，那麼提供一個人可以分叉？ – MisterJ

你需要經過所有的單選按鈕，並檢查:checked 檢查出：JSFiddle

來源

2013-05-15 12:00:07 IlyaDoroshin

謝謝。只是工作。 – Ilham

看看jQuery的.change()方法。

$("input[name=optionsRadios]").on("change", function(event) { /* DO WORK */ });

你也可以使用其中.change只是單純地產生更好的結果.click()方法，但是，經過時間和經驗，我發現很多情況下。

另外，看看jQuery的:checked選擇器。 jQuery :checked

if ($("input[name=optionsRadios]").is(":checked");) { /* DO WORK */ }

看到這個老jsFiddle我做了回答另一個SO問題。他們顯示了有關更改的一些差異，甚至點擊其中一個複選框。

來源

2013-05-15 11:52:59 SpYk3HH

$('input[type=radio]').click(function(){ 
    $('.article-types li').attr('class' , 'article-option'); 
    if($(this).is(':checked')) 
     $(this).parent().parent().addClass('highlight').removeClass('article-option'); 
    else 
     $(this).parent().parent().removeClass('highlight').addClass('article-option'); 
});

來源

2013-05-15 11:53:38

$(document).ready(function(){ 
    $('input[type=radio]').click(function(){ 
     //this will reverse the previous clicked radio class 
     $(".highlight").addClass("article-option").removeClass("highlight"); 
     $(this).closest('li').find(".article-option").addClass("highlight").removeClass("article-option"); 

    }); 
});

使用上面的代碼這會爲你工作。

來源

2013-05-15 12:00:28

與jQuery u可以使用父功能

$(document).ready(function() { 
    $("input[type='radio']").each(function(){ 
     $(this).click(function(){ 
      $("input[type='radio']").is(":not(':checked')").each(function(){ 
       //in css set colour 
       $("this").parent().css(); 
      } 
      $("input[type='radio']").is(":checked").each(function(){ 
       //in css set colour 
       $("this").parent().css(); 
      } 

     }); 
    }) 
});

來源

2013-05-15 12:01:08 speedingdeer

演示是在這裏http://jsfiddle.net/2dJAN/30/

$(".radio").click(function(){ 
    $(".article-option").removeClass('highlight') 
    if($(".radio").is(':checked')){ 
     $(this).closest('li').addClass('highlight') 
     } 
}); 


.highlight { 
    display:inline-block; 
    background-color:#ddd; 
    padding:4px 11px; 
    font-family:Arial; 
    font-size:16px; 
}

來源

2013-05-15 12:05:55 vinothini

更改背景顏色選擇

回答

相關問題