Jquery - 检查单选按钮,获取特定标签内容

保罗

在过去的几天里,我花了好几个小时尝试我能找到的几乎所有 Stack Overflow 代码片段来自己破解它,但没有任何东西能像我需要的那样工作。在这个阶段,我希望你们中的一位能帮助我。

客观的:

我有一个订单单上显示的单选按钮列表。我只想从选中的无线电输入中提取特定标签内容并将其保存到一个变量中,即“3 产品名称”或“1 产品名称”。

$("input:radio").click(function() {
  var label_description = this.parentElement.outerText;
  alert(label_description);
});

//Goal- Extract specific label content from checked radio input e.g "3 Product Name" or "1 Product Name"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pull-left elOrderProductOptinProductName">
  <input type="radio" id="lbl-01" name="purchase[product_id]" value="12374747">
  <div class="pull-right elOrderProductOptinPrice" data-cf-product-price="true" taxamo-currency="USD">$X.XX</div>
  <label for="lbl-01" data-cf-product-name="true">3 Product Name - Text here</label>
</div>

<div class="pull-left elOrderProductOptinProductName">
  <input type="radio" id="lbl-01" name="purchase[product_id]" value="839909">
  <div class="pull-right elOrderProductOptinPrice" data-cf-product-price="true" taxamo-currency="USD">$X.XX</div>
  <label for="lbl-01" data-cf-product-name="true">4 Product Name - Text here</label>
</div>

<div class="pull-left elOrderProductOptinProductName">
  <input type="radio" id="lbl-01" name="purchase[product_id]" value="839909">
  <div class="pull-right elOrderProductOptinPrice" data-cf-product-price="true" taxamo-currency="USD">$X.XX</div>
  <label for="lbl-01" data-cf-product-name="true">6 Product Name - Text here</label>
</div>

<div class="pull-left elOrderProductOptinProductName">
  <input type="radio" id="lbl-01" name="purchase[product_id]" value="839909">
  <div class="pull-right elOrderProductOptinPrice" data-cf-product-price="true" taxamo-currency="USD">$X.XX</div>
  <label for="lbl-01" data-cf-product-name="true">1 Product Name</label>
</div>

JS小提琴:http : //jsfiddle.net/1t1edf8v/5/

如您所见,我所拥有的只是提取完整标签内容和价格的工作代码。我明白为什么会发生这种情况,我只是无法隔离我需要的东西。

非常感谢您对此的任何帮助!

尼特什

简单地,使用 querySelector:

 alert(this.parentElement.querySelector("[data-cf-product-name]").outerText)

更新小提琴:http : //jsfiddle.net/1t1edf8v/3/

请注意,我在 querySelector函数中使用了属性选择器,如果您愿意,可以使用其他一些选择器。

要仅提取字符串“3 产品名称”或任何其他字符串,您可以使用 split 函数或 regEx你只需要一些模式在这里。

例如,

var text = this.parentElement.querySelector("[data-cf-product-name]").outerText;
var selected = (text.split("-"))[0].trim();
alert(selected);

更新小提琴:http : //jsfiddle.net/1t1edf8v/8/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery获取单选按钮组的值

来自分类Dev

jQuery选择特定标签

来自分类Dev

jQuery检查是否选择了单选按钮

来自分类Dev

使用jQuery从单选按钮获取数据属性

来自分类Dev

使用jQuery检查单选按钮后切换内容

来自分类Dev

Woocommerce单选按钮检查jQuery

来自分类Dev

jQuery检查未选中哪个单选按钮

来自分类Dev

如何链接到JQuery Mobile中的特定标签页?

来自分类Dev

jQuery:单选按钮未得到检查

来自分类Dev

使用JQuery的单选按钮状态检查的组合

来自分类Dev

jQuery检查多个单选按钮的值

来自分类Dev

jQuery检查单选按钮是否已选中

来自分类Dev

获取单选按钮检查值jQuery版本1.9.1

来自分类Dev

jQuery获取单选按钮组的值

来自分类Dev

jQuery Flot插件,隐藏特定标签

来自分类Dev

从Jquery集合中获取单选按钮

来自分类Dev

如何检查jQuery中的多个单选按钮?

来自分类Dev

获取引导单选按钮文本-jQuery

来自分类Dev

使用JQuery检查单选按钮

来自分类Dev

使用Jquery更改检查单选按钮ID

来自分类Dev

通过jQuery从html变量获取特定标签

来自分类Dev

检查单选按钮| jQuery的

来自分类Dev

PHP IF语句检查jQuery中的单选按钮

来自分类Dev

jQuery来当与一个特定类别的所有单选按钮都被检查执行的操作

来自分类Dev

使用jQuery获取单选按钮的值

来自分类Dev

jQuery-打开并检查onclick单选按钮

来自分类Dev

jQuery .val()函数检查单选按钮的值

来自分类Dev

如何获取未选中的单选按钮(Jquery)?

来自分类Dev

Django jquery 获取按钮的内容