我想根据数据选项卡 ID 选择复选框

Question

我有一个选择元素。当我选择一个具有特定值的选择选项时，我希望选中具有相同 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

使用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/>

Answer 3

[[ 编辑版本，现在可以正确处理<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/>