Question

我有一个复选框选项列表

library(psych)
m1 <- corr.test(mtcars)
m1$r
m1$p

现在，当我加载网站的内容时，我有其他包含数据属性和匹配值的元素。

<div id="myList">
    <input id="item_51" type="checkbox" value="51" name="item[]">
    <label for="item_51">item 51 value</label>
    <br>
    <input id="item_55" type="checkbox" value="55" name="item[]">
    <label for="item_55">some other value</label>
    <br>
    <input id="item_58" type="checkbox" value="58" name="item[]">
    <label for="item_58">another value</label>
    <br>
    ...
</div>

当<div id="em1" class="myEm" data-items="55">...</div> <div id="em4" class="myEm" data-items="51,58">...</div> <div id="em31" class="myEm" data-items="55,58">...</div>中的数字与复选框值匹配时，我需要获取复选框标签的值以填充元素div。

如果它只是一个项目匹配我没有问题，但我有点混淆多点。所以我假设我开始循环遍历具有数据项值

的项目

data-items

$('.myEm').each(function() { var matchEm = $(this).attr('data-items'), matchCh = $('#myList input:checkbox').val(matchEm); $(this).text(matchCh); });的预期结果将是：

<div id="em31" class="myEm" data-items="55,58">...</div>

Answer 1

我遍历你的类并将字符串拆分为data=items属性，然后遍历这些字符串并附加到当前<div>。

$('.myEm').each(function() {

  var myEm = $(this);
  var matchEm = $(this).attr('data-items').split(',');
  
  matchEm.forEach(function(value) {
    var label = $('#myList label[for="item_' + value + '"]').text();
    if (myEm.text().length === 0)
      myEm.append(label);
    else
      myEm.append(", " + label);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myList">
    <input id="item_51" type="checkbox" value="51" name="item[]">
    <label for="item_51">item 51 value</label>
    <br>
    <input id="item_55" type="checkbox" value="55" name="item[]">
    <label for="item_55">some other value</label>
    <br>
    <input id="item_58" type="checkbox" value="58" name="item[]">
    <label for="item_58">another value</label>
    <br>
</div>

<div id="em1" class="myEm" data-items="55"></div>
<div id="em4" class="myEm"  data-items="51,58"></div>
<div id="em31" class="myEm" data-items="55,58"></div>

Answer 2

尝试使用.split()，.map()，$.inArray()，.get()

$('.myEm').each(function() {

    var matchEm = $(this).attr('data-items').split(","),
        matchCh = $('#myList input:checkbox').map(function(i, el) {
                    return $.inArray(el.value, matchEm) !== -1 
                           ? el.nextElementSibling.innerHTML : null
                  }).get();

    $(this).text(matchCh.join(", "));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myList">
    <input id="item_51" type="checkbox" value="51" name="item[]">
    <label for="item_51">item 51 value</label>
    <br>
    <input id="item_55" type="checkbox" value="55" name="item[]">
    <label for="item_55">some other value</label>
    <br>
    <input id="item_58" type="checkbox" value="58" name="item[]">
    <label for="item_58">another value</label>
    <br>
    ...
</div>

<div id="em1" class="myEm" data-items="55">...</div>
<div id="em4" class="myEm"  data-items="51,58">...</div>
<div id="em31" class="myEm" data-items="55,58">...</div>

Answer 3

如果您将数据项从“51,58”更改为“51 58”，则可以使用attribute contains word selector ~=并执行类似的操作。

$('#myList input[type=checkbox]').each(function() {
    var temp = this;
    $('.myEm[data-items~=' + temp.value + ']').each(function(){
        var text = $('label[for=' + temp.id + ']').text();
        var currentText = $(this).text();
        if(currentText.length != 0)
          currentText = currentText + ', ' + text;
        else
          currentText = text;
        $(this).text(currentText);
    });
});

jsFiddle：http://jsfiddle.net/zjfhpffg/

Answer 4

使用复选框中的值数组：

＆＃13;

$('#myList').on('change', function() {
    var Vals = [];
    $('input[name="item[]"]:checked').each(function() {
        var strName = 'str' + $(this).val()
        Vals[strName] = $(this).next('label').text();
    });
    $('.myEm').each(function() {
        var myVals = $(this).attr('data-items').split(',');
        var strText = '';
        $.each(myVals, function(index, value) {            
            if (Vals['str' + value]) {
                if (strText != '') {
                    strText += ', '                   
                }
                strText += Vals['str' + value]
            }
        });
        $(this).text(strText);
    });
});

＆＃13;

.myEm {
    border:1px solid black;
    padding:2px 5px;
    display:inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myList">
    <input id="item_51" type="checkbox" value="51" name="item[]" />
    <label for="item_51">item 51 value</label>
    <br/>
    <input id="item_55" type="checkbox" value="55" name="item[]" />
    <label for="item_55">some other value</label>
    <br/>
    <input id="item_58" type="checkbox" value="58" name="item[]" />
    <label for="item_58">another value</label>
    <br/>
</div>
<hr />
<div id="em1" class="myEm" data-items="55">1</div>
<div id="em4" class="myEm"  data-items="51,58">2</div>
<div id="em31" class="myEm" data-items="55,58">3</div>

＆＃13;

这里只是JSFiddle，只是为了好的措施。

使用给定ID的详细信息填充元素

4 个答案: