Я хочу установить флажок на основе идентификаторов вкладок данных

Question

У меня есть элемент select. Когда я выбираю один вариант выбора с определенным значением, я хочу, чтобы флажок с тем же data_tab_ids был отмечен.

<select name="roles[]" id="roles" multiple="multiple">
  <option value="1">Admin</option>
  <option value="2">User</option>
  <option value="3">Judging</option>
</select>

<input data-tab_ids="[1,2,3,4,5,6,7,8]" class="ChkUsers" type="checkbox" name="users[]" id="users" value="1">sameer<br/>
<input data-tab_ids="[9]" class="ChkUsers" type="checkbox" name="users[]" id="users" value="2">emin<br/>
<input data-tab_ids="[2]" class="ChkUsers" type="checkbox" name="users[]" id="users" value="3"><span class="list-group-item-text">dinu<br/>

Answer 1

$(function() {

    function uncheckall() {
        $('input.ChkUsers').prop("checked", false);
    }

    function check(idx) {
        var index = idx;
        $('.ChkUsers').each(function(i, val) {

            if ($.inArray(parseInt(idx), $(this).data('tab_ids')) > -1) {
                $(this).prop("checked", true);
            }

        });
    }
    // Pre-processing: key all viewItems by the id in their data-tags:
    $('#roles').change(function() {
        uncheckall();
        $.each($("#roles option:selected"), function() {
            var selectedIdx = $(this).val();
            check(selectedIdx);
        });
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<select name="roles[]" id="roles" multiple="multiple">
  <option value="1">Admin</option>
  <option value="2">User</option>
  <option value="3">Judging</option>
  <option value="9">Nine</option>
</select>

<input data-tab_ids="[1,2,3,4,5,6,7,8]" class="ChkUsers" type="checkbox" name="users[]" id=enter code here"users" value="1">sameer<br/>
<input data-tab_ids="[9]" class="ChkUsers" type="checkbox" name="users[]" id="users" value="2">emin<br/>
<input data-tab_ids="[2]" class="ChkUsers" type="checkbox" name="users[]" id="users" value="3"><span class="list-group-item-text">dinu<br/>

Вы можете использовать inArray для проверки массива данных внутри ввода. Я хотел бы, чтобы был селектор данных, но, похоже, вы должны сделать массив поиска.

Answer 2

[[Отредактированная версия, теперь правильно обрабатывает несколько значений в <select>]]

Процесс можно упростить, если искать классы вместо определенных значений в массивах объектов данных, принадлежащих отдельным DOM. объекты. Таким образом, один из способов продвижения вперед - без изменения какого-либо HTML-кода - может быть:

// add new classNames ONCE:
var pre='xcl' // choose class prefix to avoid conflicts with existing classes
$('.ChkUsers').each(function(i,e){
  $(e).addClass(pre+$(e).data('tab_ids').join(' '+pre))
});

// add event listerner to select:
$("#roles").change(function(){ 
  $('.ChkUsers:checked').prop('checked',false);
  // construct a selector from the options selected in <select>:
  $('.'+pre+$(this).val().join(',.'+pre)).prop('checked','checked');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="roles[]" id="roles" multiple="multiple">
  <option value="1">Admin</option>
  <option value="2">User</option>
  <option value="3">Judging</option>
</select><br/>

<input data-tab_ids="[1,2,3,4,5,6,7,8]" class="ChkUsers" type="checkbox" name="users[]" id="user-sameer" value="1">sameer<br/>
<input data-tab_ids="[9]" class="ChkUsers" type="checkbox" name="users[]" id="user-emin" value="2">emin<br/>
<input data-tab_ids="[2]" class="ChkUsers" type="checkbox" name="users[]" id="user-dinu" value="3"><span class="list-group-item-text">dinu</span><br/>

Answer 3

с помощью jquery может выглядеть так:

// target select by his id
const $roles = $('#roles')

// target inputs by his id
const $inputUserSammer = $('#user-sameer')
const $inputUserEmin = $('#user-emin')
const $inputUserDinu = $('#user-dinu')
const $inputCheckBoxs = $('input[type=checkbox]')

// getting data-tab_ids values
const userSammerTabIds = $inputUserSammer.data( "tab_ids" )
const userEminTabIds = $inputUserEmin.data( "tab_ids" )
const userDinuTabIds = $inputUserDinu.data( "tab_ids" )

// listener to select when any option is selected
$roles.on('change', function () {
  // getting selected value as number
  const selectedValue = Number($(this).val())

  // set all inputs uncheckeds
  $inputCheckBoxs.prop('checked', false)

  // finding if the selectedValue is contained on tabs_ids
  // if its so then the input will be set as checked
  if (userSammerTabIds.find(id => id === selectedValue)) {
    $inputUserSammer.prop('checked', true)
  }
  if (userEminTabIds.find(id => id === selectedValue)) {
    $inputUserEmin.prop('checked', true)
  }
  if (userDinuTabIds.find(id => id === selectedValue)) {
    $inputUserDinu.prop('checked', true)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="roles[]" id="roles" multiple="multiple">
  <option value="1">Admin</option>
  <option value="2">User</option>
  <option value="3">Judging</option>
</select>
    
<input data-tab_ids="[1,2,3,4,5,6,7,8]" class="ChkUsers" type="checkbox" name="users[]" id="user-sameer" value="1">sameer<br/>
<input data-tab_ids="[9]" class="ChkUsers" type="checkbox" name="users[]" id="user-emin" value="2">emin<br/>
<input data-tab_ids="[2]" class="ChkUsers" type="checkbox" name="users[]" id="user-dinu" value="3"><span class="list-group-item-text">dinu<br/>

с использованием чистого js:

// target inputs by his id
const $inputUserSammer = document.getElementById('user-sameer')
const $inputUserEmin = document.getElementById('user-emin')
const $inputUserDinu = document.getElementById('user-dinu')
// using spread operator to get inputs as array (ES6 feature)
const $inputCheckBoxs = [...document.querySelectorAll('input[type=checkbox]')]

// target select by his id
const $roles = document.getElementById('roles')

// getting data-tab_ids values
const userSammerTabIds = JSON.parse("[" + $inputUserSammer.getAttribute("data-tab_ids") + "]")[0]
const userEminTabIds = JSON.parse("[" + $inputUserEmin.getAttribute("data-tab_ids") + "]")[0]
const userDinuTabIds = JSON.parse("[" + $inputUserDinu.getAttribute("data-tab_ids") + "]")[0]

// listener to select when any option is selected
$roles.addEventListener('change', function () {
  // getting selected value as number
  const selectedValue = Number(this.value)

  // set all inputs uncheckeds
  $inputCheckBoxs.forEach(inputCheckBox => inputCheckBox.checked = false)

  // finding if the selectedValue is contained on tabs_ids
  // if its so then the input will be set as checked
  if (userSammerTabIds.find(id => id === selectedValue)) {
    $inputUserSammer.checked = true
  }
  if (userEminTabIds.find(id => id === selectedValue)) {
    $inputUserEmin.checked = true
  }
  if (userDinuTabIds.find(id => id === selectedValue)) {
    $inputUserDinu.checked = true
  }
})

<select name="roles[]" id="roles" multiple="multiple">
  <option value="1">Admin</option>
  <option value="2">User</option>
  <option value="3">Judging</option>
</select>
    
<input data-tab_ids="[1,2,3,4,5,6,7,8]" class="ChkUsers" type="checkbox" name="users[]" id="user-sameer" value="1">sameer<br/>
<input data-tab_ids="[9]" class="ChkUsers" type="checkbox" name="users[]" id="user-emin" value="2">emin<br/>
<input data-tab_ids="[2]" class="ChkUsers" type="checkbox" name="users[]" id="user-dinu" value="3"><span class="list-group-item-text">dinu<br/>