将放置在 div 标签中的单选按钮的样式标签。

Question

I'm trying to make my labels in a different style when the radio button is checked. The problem is that I'm using a javaScript plugin called ezMark which generates

Here is the code.

<div class="ez-radio">
    <input type="radio" id="line0" name="line-style" value="1" class="ez-hide">
</div>
<label style="background:url('1.jpg')no-repeat;" ></label>

and here is CSS that I tried to use to style the code

.ez-radio input:checked+label {...}

Honestly I don't need the javaScript on this page, yet I'm using templates and it is dynamically loaded. Is there an option to switch off the ezMark js before the radiobuttons? Or maybe style the label despite the ezMark script.

EDIT

The <div ez-radio is dynamically generated by the script. I have no control so that I can add the label between this div.

- Ando

---

标签应该在 div 元素内部，如果我理解正确的话。 - mkey

你在 class="ez-radio 结尾处缺少一个 "。 - Kyle

这是我打字太快造成的，我没有漏掉它，我会纠正的。 - Ando

Answer 1

这应该能够正常工作。

<div class="ez-radio">
    <input type="radio" id="line0" name="line-style" value="1" class="ez-hide">
    <label>Label</label>
</div>

CSS

.ez-radio input:checked+label {
    font-size:2em;
}

http://jsfiddle.net/CGjCb/

- mkey

---

@Ando 我明白了，哈哈。你能不能禁用在那个页面加载插件？你对源代码有多少控制权？这里提供一些见解：http://www.itsalif.info/content/ezmark-jquery-checkbox-radiobutton-plugin - mkey

是的，这就是我现在做的，但我想知道是否有更好的方式通过跳过<div>来设置CSS样式，因为每次加载页面并检查那是否为我不想加载插件的页面时，都需要进行if检查。 - Ando

Answer 2

您需要将元素设置为兄弟元素才能使用 + 选择器。CSS无法向上遍历DOM树，因此它永远无法找到标签。

HTML

<div class="ez-radio">
    <input type="radio" id="line0" name="line-style" value="1" class="ez-hide">
    <label style="background:url('1.jpg')no-repeat;" >Label</label>
</div>

CSS：

.ez-radio input[type=radio]:checked + label 
{
    color: #0f0;
}​

http://jsfiddle.net/Kyle_/eCgyH/

---

在你编辑关于无法更改标记的内容后，你将不得不使用jQuery（JavaScript库）。

$('.ez-radio input[type=radio]') .change( function() {
        $('label').css('color', '#0f0');        
});

​ http://jsfiddle.net/Kyle_/eCgyH/1/

- Kyle

---

谢谢Kyle，看起来它能够工作，但我还有一个问题。在应用程序优化方面，您认为使用您提供的JavaScript更好，还是只需创建一个全局php if（thisPage！=“我的页面有问题”）{load ezMark.js}并且不要为该特定页面加载ezMark。那也可以。 - Ando

这实际上并不重要，因为只有一个文件中的两行代码，与另一个仅用于该页面的HTTP请求相比。我会将其保留在主JS文件中，这样就可以缓存了。 - Kyle

@SantoshKhalse 已修复 :) - Kyle

Answer 3

怎么样？

// to apply only to checkbox use:
$('input[type="checkbox"]').not(".ez-hide").ezMark({
 checkboxCls: 'your-default-checkbox-class-name' ,
 checkedCls: 'your-checkbox-class-in-checked-state'
});

- mplungjan