html 从选中的复选框中选择标签更改答案

【问题标题】：html select tag change from checked checkboxhtml 从选中的复选框中选择标签更改
【发布时间】：2017-09-07 20:52:49
【问题描述】：

当在复选框中选中某个选项时，我该怎么办，该标签显示在选择标签中？

复选框输入

<input
type="checkbox"
class="toggle-product pull-right" @if(!isset($restrictedProductIds[$p->id])) checked
@endif
data-url="{{route('image.settings.product.toggle',[$account,$album,$image,$p])}}">

选择标签

                    <select name="default_id" id="default_id" class="form-control">
                    <option value="{{$image->default_product_id}}" selected>{{$image->default_product_id}}</option>
                    @foreach($validProducts as $product)
                        @if(!isset($restrictedProductIds[$product->id]))
                        <option value="{{$product->id}}">
                            {{$product->getTranslatedName()}}
                        </option>
                        @endif
                    @endforeach
                </select>

类 .toggle-product

            $(".toggle-product").on('click', function () {
                var checked = $(this).is(':checked');
                var $status = $(this).parents(".list-group-item");
                $status.addClass('list-group-item-warning');
                $.post($(this).data('url'), {
                    'enabled': checked ? 1 : 0,
                    '_token': "{{csrf_token()}}"
                }, function (response) {
                    $status.removeClass('list-group-item-warning');
                    //location.reload();
                }.bind(this))
            });

【问题讨论】：

on 表示更改选择选项时，复选框中的相关选项将被选中？
option和各个checkbox有什么联系？
@rahul_m 是的，我想实时从选中的复选框中选择选项显示，无需刷新。
@MilindAnantwar MySQL，但我希望这一切都是实时的，如果用户 checkMug un realtime 他可以选择 show Mug 而不刷新页面
我在询问 html。他们有什么共同点？

标签： javascript php jquery html laravel

【解决方案1】：

试试这个示例代码，你可以按照自己的方式使用它。

$(document).ready(function() {
  $(document).on("change", "#select-ele", function() {
    var cur_val = $(this).val();
    $("[name='check-ele']").attr("checked", false);
    if (cur_val.length > 0) {
      $("[name='check-ele']").each(function() {
        var check_val = $(this).val();
        if ($.inArray(check_val, cur_val) > -1) {
          $(this).attr("checked", true);
        }
      });
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id="select-ele" multiple>
  <option value="1">Canvas</option>
  <option value="2">Acrylic</option>
  <option value="3">Cushion</option>
  <option value="4">Mug</option>
</select>
<br/>
<input type="checkbox" name="check-ele" value="1">Canvas
<input type="checkbox" name="check-ele" value="2">Acrylic
<input type="checkbox" name="check-ele" value="3">Cushion
<input type="checkbox" name="check-ele" value="4">Mug

我使用$.inArray 来检查是否在下拉值中选择了复选框值。

【讨论】：