jq多列标签选中，提交数据。

我们先介绍一下本文用到的函数关于jq的ajax就不讲了需要的请前往查看 ，着急看代码的同学请直接忽略这里，代码都在底下

一、关于jq attr()

attr() 函数

jq attr() 方法设置或返回被选元素的属性值。根据该方法不同的参数，其工作方式也有所差异。

jq attr() 语法

$(selector).attr(attribute,value)

参数	说明
attribute	必需规定要获取其值的属性。例如传：class,id,自定义属性
value	规定属性的值。不传获取attribute属性的值

二、关于jq val()

val() 函数

1、val() 方法返回或设置被选元素的值。

2、元素的值是通过 value 属性设置的。该方法大多用于 input 元素。

3、如果该方法未设置参数，则返回被选元素的当前值。

val() 语法

$(selector).val(value)

参数	说明
value	必需设置 Value 属性的值。不传获取元素value的值

三、实现功能

实现功能：多列标签选中，提交数据。

四、实现代码

css代码

.current{
    background-color:#0acf97;
    border-color: #00a65a;
    color: #ffffff;
  }

html代码

    <form id="form">
        <input type="hidden" name="refund" value="">
        <input type="hidden" name="repayment_id" value="">
    </form>
    <div class="form-group row">
        <label class="col-sm-1 col-form-label">示例1</label>
        <div class="col-sm-10">
            <div class="row">
                <div class="row text-center justify-content-md-center">
                    <button type="button" onclick="selectLabel(this,'refundBtn')" data-id="1" data-input="refund" data-class="refundBtn" class="refundBtn">1</button>
                </div>
                <div class="row text-center justify-content-md-center">
                    <input type="hidden"  >
                    <button type="button" onclick="selectLabel(this,'refundBtn')" data-id="2" data-input="refund" data-class="refundBtn" class="refundBtn">2</button>
                </div>
                <div class="row text-center justify-content-md-center">
                    <input type="hidden"  >
                    <button type="button" onclick="selectLabel(this,'refundBtn')" data-id="3" data-input="refund" data-class="refundBtn" class="refundBtn">3</button>
                </div>
                <div class="row text-center justify-content-md-center">
                    <input type="hidden"  >
                    <button type="button" onclick="selectLabel(this,'refundBtn')" data-id="4" data-input="refund" data-class="refundBtn" class="refundBtn">4</button>
                </div>

            </div>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-1 col-form-label">示例2</label>
        <div class="col-sm-10">
            <div class="row">
                <div class="row text-center justify-content-md-center">
                    <button type="button" onclick="selectLabel(this,'refundTypeBtn')" data-id="1" data-input="repayment_id" data-class="refundTypeBtn" class="refundTypeBtn">1</button>
                </div>
                <div class="row text-center justify-content-md-center">
                    <button type="button" onclick="selectLabel(this,'refundTypeBtn')" data-id="2" data-input="repayment_id" data-class="refundTypeBtn" class="refundTypeBtn">2</button>
                </div>
                <div class="row text-center justify-content-md-center">
                    <button type="button" onclick="selectLabel(this,'refundTypeBtn')" data-id="3" data-input="repayment_id" data-class="refundTypeBtn" class="refundTypeBtn">3</button>
                </div>
            </div>
        </div>
    </div>

jq代码

/**
 * 多列标签选中，提交数据
 * @param obj
 * @param type
 */
function selectLabel(obj,type) {
    var id = $(obj).attr('data-id');
    var input = $(obj).attr('data-input');
    var objClass = $(obj).attr('data-class');
    $('.'+objClass).attr('class',type);
    $(obj).attr('class',type+' current');
    $('input[name='+input+']').val(id);
    var data = $('#datalikeresultForm').serialize();
    $.ajax({url:"demo_test.txt",data:data,success:function(result){
        console.log(result);
    }});
}