高级复选框输入 - 让用户选择单个 div答案

【问题标题】：Advanced checkbox inputs - let user choose a single div高级复选框输入 - 让用户选择单个 div
【发布时间】：2014-05-30 06:01:12
【问题描述】：

编辑：感谢您的所有回复！我忘了说如果它更像<input type="radio">并且只能选择一个主题会更好。这是我已经拥有的（虽然不多）。 只能检查一个输入的功能不起作用。此外，还缺少应该在已选中单选按钮时**取消选中单选按钮的功能。

链接：JSFiddle。希望它现在有效。 **

我正在创建一个包含主题选择器的 3 步表单。这些主题显示为 div。

单个 div 看起来像这样：

<div class="theme">Theme</div>

如何获取点击的div的值？

网址参数？

<div class="theme"><a href="?theme=2">Theme</a></div>

或者是否可以通过一些表单输入？

<div class="theme"><input type="checkbox">???</div>

【问题讨论】：

【解决方案1】：

$('.theme').on('click', function () {
    var value = $(this).html(); // Here you go
    alert(value);
});

【讨论】：

【解决方案2】：

如果您想获取 div 中的文本，在这种情况下为 Theme：

<div class="theme">Theme</div>

然后：

$('.theme').click(function () {
     console.log($(this).text()); // will get you Theme
});

如果你想获取 div 中的所有内容：

<div class="theme">
<a href="?theme=2">Theme</a>
</div>

然后：

$('.theme').click(function () {
        console.log($(this).html()); // will give you  <a href="?theme=2">Theme</a>
    });

如果你想要链接标签之间的文字那么：

$('.theme').click(function () {
        console.log($(this).find("a").text()); // will give you theme
    });

【讨论】：

【解决方案3】：

另一种解决方案是使用 html 数据属性。

HTML

<div class="theme" data-theme="2">Theme</div>

然后您可以使用 jquery 检索它：

$('.theme').on('click', function () {
  var value = $(this).data("theme");
alert(value);
});

这是一个显示示例 http://jsfiddle.net/f5VH6/ 的小提琴

【讨论】：