將類添加到默認選中複選框和收音機的標籤

-1

我已經找到了很多這樣的例子，但沒有發現我正在嘗試在一個塊中做什麼。我需要更改複選框或收音機的標籤（標籤必須包裹在我的奇特輸入的輸入周圍），具體取決於複選框或收音機是否已「檢查」。其中一些輸入將在抵達表格時進行檢查，因此如果選中，班級需要在抵達時出示。將類添加到默認選中複選框和收音機的標籤

它現在正在爲複選框工作，但是如何將單選按鈕添加到混音中而不破壞它？感謝幫助！

這裏是我的HTML/CSS：

<style type="text/css"> 
.c_on {color: #F0F;} 
.r_on {color: #0F0;} 
</style> 

<fieldset class="checkboxes"> 

    <label for="chk1"><input type="checkbox" id="chk1" />chk1</label><br /> 
    <label for="chk2"><input type="checkbox" id="chk2" checked="checked" />chk2</label> 

</fieldset> 

<fieldset class="radios"> 

    <label for="rdo1"><input type="radio" name="group1" id="rdo1" />rdo1</label><br /> 
    <label for="rdo2"><input type="radio" name="group1" id="rdo2" checked="checked" />rdo2</label> 

</fieldset>

這裏是我的jQuery：

$(document).ready(function() { 

    /* Turn checkbox class on */ 
    var checkOn = 'c_on' 

    function toggleLabelClass(input){ 
     var $input = $(input); 
     if ($input.is('[type="checkbox"]:checked')){ 
      $input.parent('label').addClass(checkOn); 
     }else{ 
      $input.parent('label').removeClass(checkOn) 
     } 
    } 
    $(function() { 
     $('input[type="checkbox"]').each(function(){ 
      toggleLabelClass(this); 
      $(this).click(function(evt){ 
       toggleLabelClass(evt.target); 
      }); 
     }); 
    }); 

});

http://jsfiddle.net/P2n2V/

來源

2012-08-04 mezzerpezzer

演示小提琴：http://jsfiddle.net/P2n2V/ – 2012-08-04 20:34:18

請結束所有以'你的報表;'。我想知道，你甚至試圖使它與「無線電」一起工作嗎？ – 2012-08-04 20:38:44

謝謝，我還是jQuery的新手，這是我找到的一個例子。我試圖重複爲複選框做了什麼，但我認爲這與變量有衝突。我也希望它是在正確的語法，所以我不重複功能。試圖學習。 – mezzerpezzer 2012-08-05 00:09:44

也許這樣的事情會工作：

$(function() { 
    var inputOn = 'c_on', 
     radioOn = 'r_on', 
     elms=$('input[type="checkbox"], input[type="radio"]'); 

    function setLabelClass() { 
     elms.each(function(i,e) { 
      $(e).parent('label')[e.checked?'addClass':'removeClass']($(e).is(':radio')?radioOn:inputOn); 
     }); 
    } 

    elms.on('change', setLabelClass); 
    setLabelClass(); 
});

FIDDLE

來源

2012-08-04 20:50:10 adeneo

這似乎沒有工作。感謝您的嘗試。 – mezzerpezzer 2012-08-05 00:10:21

@mezzerpezzer - 它似乎工作對我來說很好，什麼不工作？ – adeneo 2012-08-05 00:18:00

我看到它在小提琴中工作，但是當我把它放在我的文件中時，它不起作用。我忘記了什麼嗎？ http://pixelfarmers.com/beta/checkbox.html – mezzerpezzer 2012-08-05 00:25:13

您需要的無線輸入添加到each()循環並進行一些更改toggleLabelClass()功能。這是你需要的：http://jsfiddle.net/zjc9e/

我不知道你是什麼意思，不打破混合。有沒有你不想改變的部分代碼？

來源

2012-08-04 20:41:46 Zefiryn

謝謝你！這工作！有一件事，雖然......當你點擊另一臺收音機時，你如何在取消選中的收音機上關閉課程？即使不再檢查收音機，收音機也能保持課程。 – mezzerpezzer 2012-08-05 00:13:59

將類添加到默認選中複選框和收音機的標籤

回答

相關問題