在隐藏输入中使用逗号分隔的字符串获取输入按钮的值

时间：2017-03-15 09:47:11

标签： javascript jquery button

我有5个带值的输入按钮。

<input class="btn btn-default baths" name="baths"  type="button" value="1">
<input class="btn btn-default baths" name="baths"  type="button" value="2">
<input class="btn btn-default baths" name="baths"  type="button" value="3">
<input class="btn btn-default baths" name="baths"  type="button" value="4">
<input class="btn btn-default baths" name="baths"  type="button" value="5+">

我希望点击隐藏输入字段中的所有按钮值，如果用户再次单击该按钮，则该按钮的值也会从隐藏字段中消失。 

<input class="all_baths" type="hidden" value="">

算我作为jquery的初学者和所有人。

我试过这个jquery但没有得到正确的结果。单击隐藏字段中的所有按钮即可获得所有值。

$('input.baths').click(function () {
    $value = $('input.baths').map(function () {
        return $(this).val()
    }).get().join(',');

    $('input.all_baths').val($value);
});

隐藏字段中我想要的是

<input class="all_baths" type="hidden" value="1,3,4">

5 个答案:

答案 0 :(得分：1)

纯JS解决方案：

注意：我已从输入中删除了hidden类型，以使结果可见。

var elems = document.getElementsByName('baths'),
    hidden = document.getElementById('hidden'),
    values = [];
    
Array.from(elems).forEach(v => v.addEventListener('click', function() {
  values.indexOf(this.value) == -1 ? values.push(this.value) : values.splice(values.indexOf(this.value), 1);
  hidden.value = values.sort((a,b) => a.match(/\d+/) - b.match(/\d+/));
}));
<input class="btn btn-default baths" name="baths" type="button" value="1">
<input class="btn btn-default baths" name="baths" type="button" value="2">
<input class="btn btn-default baths" name="baths" type="button" value="3">
<input class="btn btn-default baths" name="baths" type="button" value="4">
<input class="btn btn-default baths" name="baths" type="button" value="5+">

<input class="all_baths" type="" value="" id='hidden'>

答案 1 :(得分：0)

＆＃13;
＆＃13; 
var baths = []
$('input.baths').click(function() {

  //$(".btn.baths").each(function(){

  baths.push($(this).val())
  //})

  $(".all_baths").val(baths)
})
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="btn btn-default baths" name="baths" type="button" value="1">
<input class="btn btn-default baths" name="baths" type="button" value="2">
<input class="btn btn-default baths" name="baths" type="button" value="3">
<input class="btn btn-default baths" name="baths" type="button" value="4">
<input class="btn btn-default baths" name="baths" type="button" value="5+">


<input class="all_baths" type="hidden" value="">
＆＃13;
＆＃13;
＆＃13;

点击按钮

，在数组上添加点击值

答案 2 :(得分：0)

试试这个你想要的

var baths = [];
$('input[name="baths"]').click(function () {
debugger;
$('input[name="baths"]').each(function() {
      $value = $(this).val();
baths.push($(this).val())
});
if($('input.all_baths').val()){
$('input.all_baths').val("");
 baths=[];
}
else{
$('input.all_baths').val(baths.join(','));

}
    
});
<input class="btn btn-default baths" name="baths"  type="button" value="1">
<input class="btn btn-default baths" name="baths"  type="button" value="2">
<input class="btn btn-default baths" name="baths"  type="button" value="3">
<input class="btn btn-default baths" name="baths"  type="button" value="4">
<input class="btn btn-default baths" name="baths"  type="button" value="5+">

<input class="all_baths" type="" value="">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

答案 3 :(得分：0)

输入是否为button类型？可以很容易地使用checkbox类型执行此操作。

$('.baths').on('change', function() {
    var vals = [];
    $('.baths:checked').each(function(){ //could also use .map here
        vals.push($(this).val());
    });
    $('.all_baths').val(vals.join(','));
    console.log($('.all_baths').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="btn btn-default baths" name="baths"  type="checkbox" value="1">
<input class="btn btn-default baths" name="baths"  type="checkbox" value="2">
<input class="btn btn-default baths" name="baths"  type="checkbox" value="3">
<input class="btn btn-default baths" name="baths"  type="checkbox" value="4">
<input class="btn btn-default baths" name="baths"  type="checkbox" value="5+">

<input class="all_baths" type="hidden" value="">

否则 - 你需要跟踪数组中点击的内容：

var baths = [],
    $baths = $('.baths'),
    $all_baths = $('.all_baths');
$baths.on('click', function(){
    var $this = $(this),
        val = $this.val();
    //Already added - remove it
    if(baths.indexOf(val) > -1) {
      baths.splice(baths.indexOf(val), 1);
    }
    //not added - add it
    else {
        baths.push(val);
    }
    
    $all_baths.val(baths.join(','));
    console.log($all_baths.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="btn btn-default baths" name="baths"  type="button" value="1">
<input class="btn btn-default baths" name="baths"  type="button" value="2">
<input class="btn btn-default baths" name="baths"  type="button" value="3">
<input class="btn btn-default baths" name="baths"  type="button" value="4">
<input class="btn btn-default baths" name="baths"  type="button" value="5+">

<input class="all_baths" type="hidden" value="">

答案 4 :(得分：0)

我认为此代码适合您。当您点击某个按钮时，该值将添加到hidden字段，当您再次点击该字段时，该值将从您所说的hidden字段中删除。

<input class="btn btn-default baths" name="baths"  type="button" value="1">
<input class="btn btn-default baths" name="baths"  type="button" value="2">
<input class="btn btn-default baths" name="baths"  type="button" value="3">
<input class="btn btn-default baths" name="baths"  type="button" value="4">
<input class="btn btn-default baths" name="baths"  type="button" value="5+">

<input class="all_baths" type="hidden" value="">

JQuery代码 

$(document).ready(function() {
    $('.baths').on('click', function () {
          var current = $(this).val();
          var prev = $('.all_baths').val();
          console.log("current "+current+ " prev="+prev);

          if (prev === "") {
                $('.all_baths').val(current); //If hidden field is empty then add first value
          } else {
            var current = $(this).val();
            var arr = prev.toString().split(',');
            if ($.inArray(current, arr) != -1) {
              arr.splice(arr.indexOf(current),1); //If value already present then remove it
            } else {
              arr.push(current); // If value not present already then add it
            }
            console.log("array "+arr);
            $('.all_baths').val(arr.join(",").toString()); // Add the final array to hidden field
          }

      });

});

Working JS fiddle

您可以查看注释以了解代码。我希望它可以帮助你。

相关问题
最新问题