获取复选框在jQuery中插入输入值
获取复选框在jQuery中插入输入值
提问于 2021-08-31 08:47:03
我有一个复选框功能，只能选择一个值。如果用户选择other的选项，则必须插入该值。
现在我正在尝试获取用户插入的输入的值。
但是我在我的console.log中得到了这个，它没有显示我之前插入的任何值。
如果用户选择others作为选项，我如何修复jQuery以获得输入值？
let subject_type = '';
$('input[name="web[]"]').change(function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
if (this.value != 'others') {
subject_type = this.value;
} else if (this.value == 'others') {
subject_type = $("#subject_name").val();
}
});
$("#subject").hide();
$("#oth_subject").change(function() {
if ($("#oth_subject").is(':checked')) {
$("#subject").show();
} else {
$("#subject").hide();
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-6 mb-30">
<label>Pick A Subject</label>
<div class="form-group">
<ul>
<li><label class="checkbox"><input type="checkbox" name="web[]" value="Science"> Science</label></li>
<li><label class="checkbox"><input type="checkbox" name="web[]" value="Math"> Math</label></li>
<li><label class="checkbox"><input type="checkbox" name="web[]" id="oth_subject" value="others">Others</label></li>
</ul>
</div>
</div>
<div class="col-lg-12 mb-30" id="subject" class="row">
<label><b><span style="color:#e60000;">*</span> Insert the subject you wish </b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="text" id="subject_name">
</div>
</div>
我正在检查formData条目中的值。
<div class="col-md-12">
<button type="button" sendForm ="submit()">SEND</button>
</div>
const sendForm = () =>{
let formData = new FormData();
//assuming I have another data just u show this
formData.append('subject', subject_type);
for (var pair of formData.entries()) {
console.log(pair[0]+ ', ' + pair[1]);
}
}
}回答 3
Stack Overflow用户
回答已采纳
发布于 2021-08-31 08:54:11
您需要检查其他subject输入中的更改：
let subject_type = '';
$('input[name="web[]"]').change(function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
if (this.value != 'others') {
subject_type = this.value;
} else if (this.value == 'others') {
subject_type = $("#subject_name").val();
}
});
$("#subject").hide();
$("#oth_subject").change(function() {
if ($("#oth_subject").is(':checked')) {
$("#subject").show();
} else {
$("#subject").hide();
}
});
$('#subject').change(function() {
subject_type = $("#subject_name").val();
console.log(subject_type)
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-6 mb-30">
<label>Pick A Subject</label>
<div class="form-group">
<ul>
<li><label class="checkbox"><input type="checkbox" name="web[]" value="Science"> Science</label></li>
<li><label class="checkbox"><input type="checkbox" name="web[]" value="Math"> Math</label></li>
<li><label class="checkbox"><input type="checkbox" name="web[]" id="oth_subject" value="others">Others</label></li>
</ul>
</div>
</div>
<div class="col-lg-12 mb-30" id="subject" class="row">
<label><b><span style="color:#e60000;">*</span> Insert the subject you wish </b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="text" id="subject_name">
</div>
</div>
Stack Overflow用户
发布于 2021-08-31 09:16:16
@Mailme您只需在主题输入上使用change事件即可完成此操作：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-6 mb-30">
<label>Pick A Subject</label>
<div class="form-group">
<ul>
<li><label class="checkbox"><input type="checkbox" name="web[]" value="Science"> Science</label></li>
<li><label class="checkbox"><input type="checkbox" name="web[]" value="Math"> Math</label></li>
<li><label class="checkbox"><input type="checkbox" name="web[]" id="oth_subject" value="others">Others</label></li>
</ul>
</div>
</div>
<div class="col-lg-12 mb-30" id="subject" class="row">
<label><b><span style="color:#e60000;">*</span> Insert the subject you wish </b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="text" id="subject_name">
</div>
</div>
let subject_type = '';
$('input[name="web[]"]').change(function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
if (this.value != 'others'){
subject_type = this.value;
}
else if (this.value == 'others'){
subject_type = $("#subject_name").val();
}
});
$("#subject").hide();
$("#oth_subject, #subject").change(function(){
if ($("#oth_subject").is(':checked')){
$("#subject").show();
}else{
$("#subject").hide();
}
subject_type = $("#subject_name").val();
if(subject_type)
console.log(subject_type);
});Stack Overflow用户
发布于 2021-08-31 09:39:07
您不需要任何change事件，只要在需要文本框中subject_name的值的地方使用("#subject_name").val()即可：
$("#subject").hide();
$("#oth_subject").change(function () {
if ($("#oth_subject").is(':checked')) {
$("#subject").show();
} else {
$("#subject").hide();
}
});
const sendForm = () => {
let formData = new FormData();
formData.append('subject', $("#subject_name").val());
for (var pair of formData.entries()) {
console.log(pair[0] + ', ' + pair[1]);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-6 mb-30">
<label>Pick A Subject</label>
<div class="form-group">
<ul>
<li><label class="checkbox"><input type="checkbox" name="web[]" value="Science"> Science</label></li>
<li><label class="checkbox"><input type="checkbox" name="web[]" value="Math"> Math</label></li>
<li><label class="checkbox"><input type="checkbox" name="web[]" id="oth_subject" value="others">Others</label></li>
</ul>
</div>
</div>
<div class="col-lg-12 mb-30" id="subject" class="row">
<label><b><span style="color:#e60000;">*</span> Insert the subject you wish </b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="text" id="subject_name">
</div>
</div>
<div class="col-md-12">
<button type="button" onclick="sendForm()">SEND</button>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68995583
复制相关文章
相似问题
腾讯云开发者
