使用JS回退在单选按钮检查上显示div

Question

我正在构建一个网站，桌面版一次显示10个图像(5x2)，这在小型智能手机显示屏上看起来显然不太好。为了解决这个问题，我制作了10个单选按钮(只显示在移动版网站上)，并且只显示选中的单选按钮附带的图像。这很容易用HTML和CSS3实现，比如

HTML:

<input type="radio" name='pdr' id="pdr1"><label for="pdr1"> Click here</label>
<div class="populardevice" id="populardevice1">stuff in this div</div>

CSS：

.populardevice {
display: none;
}
input#pdr1:checked ~ #populardevice1 {
display: inline;
}

问题是较旧的浏览器不支持：checked选择器。我的想法是，如果支持的话，使用CSS3的方式来显示div，如果不支持，则使用JavaScript作为后备。我已经找到了这个，这基本上就是我想要的。唯一的问题是如何检测是否存在对：checked选择器的支持？我想到了Modernizr，但似乎所要做的就是在我的CSS中创建一个额外的类，上面写着no checked(对吧？)，这对我来说毫无用处，因为在这种情况下我想运行JS的piece。或者Modernizr是否适合这种情况，像这样使用它(伪代码-我还不知道如何编写，但如果它是解决方案，我会找到方法)：

if (Modernizr.:checked supported) {
use that and terminate this function;
} else {
Execute the JavaScript function from the link above;
}

还是你们建议我实现一些完全不同的东西？

提前谢谢。

Answer 1

来自Modernizr网站：

使用带JavaScript 的Modernizr

Modernizr对象

Modernizr跟踪其所有特征检测的结果通过Modernizr对象。这意味着，对于每个测试将添加相应的属性。你只需要测试在你的代码中找出你想做什么的真实性

if (Modernizr.awesomeNewFeature) {
showOffAwesomeNewFeature();
} else {
getTheOldLameExperience();
}

所以您的伪代码非常接近！