添加文本值輸入時選中了 Jquery 復選框

Question

如何通過使用文本輸入檢查來切換復選框並自動檢查它是否存在於列表中？

例如 ：

• 如果在id=222的輸入中寫入id=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>

模板文字參考，以防萬一。

Answer 2

我不會使用 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>

Answer 3

這是一個使用您在問題中指定的條件的示例。

我的警報不是真正的 js 警報，因為它會停止任何進一步的輸入更改，所以我創建了一個警報函數來顯示[name="scan"]輸入值是否存在於您的checkbox輸入 ID 中。

請參閱我的腳本中的評論...

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