将类添加到默认选中复选框和收音机的标签

-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

将类添加到默认选中复选框和收音机的标签

回答

相关问题