html從選中的復選框中選擇標記更改

Question

復選框中的某些選項被選中時，該怎么辦？

復選框輸入

<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)) }); 

Answer 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來檢查下拉列表中是否選中了復選框。