问题描述
如何使用文本输入检查来切换复选框并自动检查列表中是否存在该复选框？
例如：
- 如果您在输入中用{{1}}写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
}
})
})解决方法
您可以使用.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参考，以防万一。
,我不会使用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>,
以下是使用您所指定条件的示例。
我的警报不是真正的js警报，因为它将停止任何进一步的输入更改，因此我创建了一个警报功能来显示error[E0495]: cannot infer an appropriate lifetime for lifetime parameter `'a` due to conflicting requirements
--> src/main.rs:18:16
|
18 | return Config {
| ^^^^^^
|
note: first,the lifetime cannot outlive the anonymous lifetime #1 defined on the method body at 17:5...
--> src/main.rs:17:5
|
17 | pub fn new(f: &str) -> Self {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^
note: ...so that reference does not outlive borrowed content
--> src/main.rs:19:19
|
19 | file: f,| ^
note: but,the lifetime must be valid for the lifetime `'_` as defined on the impl at 16:13...
--> src/main.rs:16:13
|
16 | impl Config<'_,'_,'_> {
| ^^
note: ...so that the expression is assignable
--> src/main.rs:18:16
|
18 | return Config {
| ________________^
19 | | file: f,20 | | database: Database {
21 | | host: "",// Value passed by a variable subsequently read from a configuration file
... |
26 | | },27 | | };
| |_________^
= note: expected `Config<'_,'_>`
found `Config<'_,'_>`
输入ID中是否存在[name="scan"]输入值。 / p>
查看我的脚本中的评论...
checkbox// 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
}