当我添加文本值输入时选中了 Jquery 复选框

Question

如何使用文本输入检查来切换复选框并自动检查它是否存在于列表中？

例如：

• 如果您在输入中使用id=222 写入222，将被检查
• 如果已经选中，则取消选中
• 如果未找到，将显示警报

$(document).ready(function() {
  $('#Scan').on('keypress', function(e) {
    if (e.which == 13) {
      Scan = $('#Scan').val();
      //if value exsit in the list -> checked
      //if value checked -> dechecked
      //if value not exist -> alert not exist
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="Scan" name="Scan" type="text" autocomplete="off" placeholder="Tracking Number" autofocus>
<br/>
<input class="custom-control-input" type="checkbox" id="111" value="111">
<label for="111" class="custom-control-label">111</label>
<br/>
<input class="custom-control-input" type="checkbox" id="222" value="222">
<label for="222" class="custom-control-label">222</label>
<br/>
<input class="custom-control-input" type="checkbox" id="333" value="333">
<label for="333" class="custom-control-label">333</label>
<br/>
<input class="custom-control-input" type="checkbox" id="444" value="444">
<label for="444" class="custom-control-label">444</label>
<br/>
<input class="custom-control-input" type="checkbox" id="555" value="555">
<label for="555" class="custom-control-label">555</label>

Answer 1

您可以使用.length 检查您的结果集合中是否包含元素。

$(document).ready(function() {
  $('#Scan').on('keypress', function(e) {
    if (e.which == 13) {
      Scan = $('#Scan').val();
      target = $(`#${Scan}`);
      if (target.length) {
         target.prop('checked', !target.prop('checked'));
      } else {
         alert("Not found");
      }
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="Scan" name="Scan" type="text" autocomplete="off" placeholder="Tracking Number" autofocus>
<br/>
<input class="custom-control-input" type="checkbox" id="111" value="111">
<label for="111" class="custom-control-label">111</label>
<br/>
<input class="custom-control-input" type="checkbox" id="222" value="222">
<label for="222" class="custom-control-label">222</label>
<br/>
<input class="custom-control-input" type="checkbox" id="333" value="333">
<label for="333" class="custom-control-label">333</label>
<br/>
<input class="custom-control-input" type="checkbox" id="444" value="444">
<label for="444" class="custom-control-label">444</label>
<br/>
<input class="custom-control-input" type="checkbox" id="555" value="555">
<label for="555" class="custom-control-label">555</label>

参考template literals，以防万一。

Answer 2

这是一个使用您指定的条件的示例。

我的警报不是真正的 js 警报，因为它会停止任何进一步的输入更改，所以我创建了一个警报函数来显示 [name="scan"] 输入值是否存在于您的 checkbox 输入 ID 中。

在我的脚本中查看 cmets...

// create input ids array
let input_ids = [];

// for each checkbox type input id
$('[type="checkbox"]').each(function() {

  // get the input id
  let input_id = $(this).attr('id');

  // add input id to input ids array
  input_ids.push(input_id);

});

// on input change in doc for elem [name="scan"]
$(document).on('input', '[name="scan"]', function(e) {

  // [name="scan"] current input val
  let val = e.target.value;

  // if val exist in input ids array
  if ($.inArray(val, input_ids) >= 0) {

    // get this input by id
    let $input = $('#' + e.target.value);

    // if input is checked
    if ($input.prop('checked')) {

      // uncheck input
      $input.prop('checked', false);

    } else {

      // else check input
      $input.prop('checked', true);

    }

  } else {

    // run alert
    alert(e);

  }

  // stop propagation
  e.stopPropagation();

});

// not found alert
function alert(e) {

  // activate alert class
  $('.alert').addClass('active');

  // time out to hide
  setTimeout(function() {

    // remove class
    $('.alert').removeClass('active');

  }, 1000);

}

.alert {
  position: fixed;
  top: 10px;
  right: 10px;
  background: red;
  padding: .25rem .5rem;
  opacity: 0;
  transition: all .5s ease;
  color: #fff;
}

.alert.active {
  opacity: 1
}

<input name="scan" type="text" autocomplete="off" placeholder="Tracking Number" autofocus />
<br />
<input class="custom-control-input" type="checkbox" id="111" />
<label for="111" class="custom-control-label">111</label>
<br />
<input class="custom-control-input" type="checkbox" id="222" />
<label for="222" class="custom-control-label">222</label>
<br />
<input class="custom-control-input" type="checkbox" id="333" />
<label for="333" class="custom-control-label">333</label>
<br />
<input class="custom-control-input" type="checkbox" id="444" />
<label for="444" class="custom-control-label">444</label>
<br />
<input class="custom-control-input" type="checkbox" id="555" />
<label for="555" class="custom-control-label">555</label>

<div class="alert">Not found</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

我不会使用 jQuery，但如果你坚持：

$(function(){
const scan = $('#Scan'), cci = $('.custom-control-input');
let scanVal;
scan.on('input', ()=>{
  let scanVal = scan.val(), good;
  cci.each((i, n)=>{
    if(scanVal === $(n).val()){
      n.checked = !n.checked; good = true;
    }
  });
  if(good === undefined && scanVal.length > 2){
    alert('Never use Alert');
  }
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="Scan" name="Scan" type="text" autocomplete="off" placeholder="Tracking Number" autofocus>
<br/>
<input class="custom-control-input" type="checkbox" id="111" value="111">
<label for="111" class="custom-control-label">111</label>
<br/>
<input class="custom-control-input" type="checkbox" id="222" value="222">
<label for="222" class="custom-control-label">222</label>
<br/>
<input class="custom-control-input" type="checkbox" id="333" value="333">
<label for="333" class="custom-control-label">333</label>
<br/>
<input class="custom-control-input" type="checkbox" id="444" value="444">
<label for="444" class="custom-control-label">444</label>
<br/>
<input class="custom-control-input" type="checkbox" id="555" value="555">
<label for="555" class="custom-control-label">555</label>