Question

我有多个文本输入，它们都共享相同的类名。

假设已编写代码，那么这些文本输入中的任何一个在任何时候都可以具有值，是否有可能通过类名搜索这些文本输入的值，而仅返回具有用户写入的数据？

出于这个问题的目的，我将如何在下面的代码的警报框中返回该值？

var input = document.getElementsByClassName("input").value;

alert("input");

如果不可能使用类名，是否有可以实现相同效果的替代解决方案？

我宁愿避免给每个文本输入一个id并为每个文本编写代码，因此想使用类名。

Answer 1

//find all the elements, filter out the ones without a value, get the value
$('.theClass').filter(function(){ return this.value.trim(); }).val()

var $inputs = $('.aClass');

$inputs.on('input', function(){
    $inputs.not(this).prop('disabled', this.value.trim());
});

$('button').on('click', function(){
  console.log(
    $inputs.filter(function(){ return this.value.trim(); }).val()
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input type="text" class="aClass"></div>
<div><input type="text" class="aClass"></div>
<div><input type="text" class="aClass"></div>
<div><input type="text" class="aClass"></div>
<div><button>Get Value</button></div>

Answer 2

请尝试以下代码，

    var matches = document.getElementsByClassName('input');

    for (var i=0; i<matches.length; i++) {
        //do action
        console.log(matches[i].value)
    }

通过类名称获取多个文本输入的值，并且仅从具有值的输入中返回值

2 个答案: