Question

当单击“扩展”时，我需要获取复选框的值，我尝试了以下操作，这看起来很笨拙，并且在修改DOM时，它可能会呈现未定义状态，而不是期望值CBVALUE

<tr>
    <td class="first"><input class="selects" type="checkbox" value="CBVALUE" id="r0"></td>
    <td class="second"><a target="_blank" href="rGjgODop0">Somevalue</a></td>
    <td class="third"><a class="option s" id="option_0">Expand</a> <a href=""></a></td>
    <td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr>

$('.option').click(function(e) {
    e.preventDefault();
    alert($(this).parent().prev().prev().children().first().val()); //should alert as CBVALUE 
});

有比遍历相关元素更简单的解决方案吗？

Answer 1

您可以尝试以下逻辑，在其中找到父tr，然后找到checkbox读取值

$(function(){
$('.option').on('click', function(e) {
    e.preventDefault();
    var value = $(this).closest('tr').find('input:checkbox').val();
    alert(value);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
    <td class="first"><input class="selects" type="checkbox" value="CBVALUE" id="r0"></td>
    <td class="second"><a target="_blank" href="rGjgODop0">Somevalue</a></td>
    <td class="third"><a class="option s" id="option_0">Expand</a> <a href=""></a></td>
    <td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr> 
</table>

Answer 2

您可以使用jQuery的$(...).siblings()方法并将其传递给选择器：

$('.option').click(function(e) {
    e.preventDefault();
    alert($(this).siblings("#r0[type='checkbox']").val()); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
    <td class="first"><input class="selects" type="checkbox" value="CBVALUE" id="r0"></td>
    <td class="second"><a target="_blank" href="rGjgODop0">Somevalue</a></td>
    <td class="third"><a class="option s" id="option_0">Expand</a> <a href=""></a></td>
    <td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr>

Answer 3

改为尝试$.parents()：

$(this).parents('tr').find('input[type=checkbox]').val()

Answer 4

对我来说，.find() 方法似乎返回一个复选框对象数组，我需要在末尾添加 [0] 才能应用 .val() 方法，否则我总是“打开”。示例：

<template> <div>  <div class="infoBar"> <svg-icon fill="#d5d5dc" :width="16" :height="16" name="common/c-info" class="infoBar__icon" /> </div> </div> </template> <script> export default { name: 'ContentInfo', props: { tooltipContent: { type: String, default: 'hint text goes here' } }, mounted () { console.log(this.tooltipContent) this.applyCSS() }, beforeUpdate () { this.applyCSS() }, methods: { applyCSS () { const cssRule = ` .infoBar:after{ content: ${this.tooltipContent}; }` const style = document.createElement('style') style.type = 'text/css' this.$el.appendChild(style) style.innerHTML = cssRule } } } </script> <style lang="postcss" > .infoBar{ position: relative; margin-left: 24px; &::after { background-color: #000; font-size: 12px; color: #fff; border-radius: 2px; width: 198px; height: 40px; /*content: var(--info-msg)*/ display: none; padding: 11px 26px 10px 27px; position: absolute; top: 0; left: 80%; transform: translate(-50%, calc(-100% - 10px)); z-index: 999; } &::before { background-color: #000; content: ''; display: none; position: absolute; width: 10px; height: 6px; z-index: 999; top: 0; left: 80%; transform: translate(-50%, calc(-100% - 10px)) rotate(45deg); } &:hover::after { display: block; } &:hover::before { display: block; } &__icon:hover{ fill: #e4002b; } } </style>

Answer 5

可以通过使用过滤来完成。观看此演示link

$(this).closest('td').parent().find('input[type=checkbox]').val()

使用Jquery从表单元格获取复选框的值

5 个答案: