在jQuery中获取复选框的额外输入到数组中

Question

我有多个选择复选框others其中包含一个选项，用户可以根据需要选中任意数量的选项，如果他们想要的选项不在选项列表中，他们可以单击others选项并插入值。

我在将插入的输入值添加到数组中时遇到问题。

只有列出的选项的值被推入数组，而不是插入的值。

let fruit_temp = [];
$(document).ready(function() {

$("#fruit").hide();
$("#fruit_option").change(function() {
if ($("#fruit_option").is(':checked')) {
$("#fruit").show();
} else {
$("#fruit").hide();
}
});
$('input[name="chk_fruit"]').change(function() {
fruit_temp = [];
$('input[name="chk_fruit"]:checked').each(function() {
if (this.value != 'others') {
fruit_temp.push($(this).val());
} else {
fruit_temp.push($('#fruit_name').val());
}
});

});
});
const submit = () => {
let formData = new FormData();
//more formData
formData.append('Fruit', fruit_temp);
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><b>Favourite Fruit</b></label><br>
<div class="form-group">
<ul>
<li><input type="checkbox" name="chk_fruit" value="Apple"> Apple</li>
<li><input type="checkbox" name="chk_fruit" value="Manggo"> Manggo</li>
<li><input type="checkbox" name="chk_fruit" value="Honeydew"> Honeydew</li>
<li><input type="checkbox" name="chk_fruit" value="Orange"> Orange</li>
<li><input type="checkbox" name="chk_fruit" id="fruit_option" value="others"> Others</li>
</ul>
<div class="col-lg-12 mb-30" id="fruit" class="row">
<label><b>insert fruit name you wish </b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="text" id="fruit_name">
</div>
</div>
<!-- more form field -->
<br><br>
<button onclick="submit()">Submit</button>
</div>
</div>

Answer 1

由于您正在推送更改事件的值，因此没有值。您可以在输入的焦点事件上推送值：

$('#fruit_name').on('focusout', function(){
fruit_temp.push($('#fruit_name').val());
});

let fruit_temp = [];
$(document).ready(function() {

$("#fruit").hide();
$("#fruit_option").change(function() {
if ($("#fruit_option").is(':checked')) {
$("#fruit").show();
} else {
$("#fruit").hide();
}
});
$('input[name="chk_fruit"]').change(function() {
fruit_temp = [];
$('input[name="chk_fruit"]:checked').each(function() {
if (this.value != 'others') {
fruit_temp.push($(this).val());
} else {
$('#fruit_name').on('focusout', function(){
fruit_temp.push($('#fruit_name').val());
});        
}
});

});
});
const submit = () => {
let formData = new FormData();
//more formData
formData.append('Fruit', fruit_temp);
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><b>Favourite Fruit</b></label><br>
<div class="form-group">
<ul>
<li><input type="checkbox" name="chk_fruit" value="Apple"> Apple</li>
<li><input type="checkbox" name="chk_fruit" value="Manggo"> Manggo</li>
<li><input type="checkbox" name="chk_fruit" value="Honeydew"> Honeydew</li>
<li><input type="checkbox" name="chk_fruit" value="Orange"> Orange</li>
<li><input type="checkbox" name="chk_fruit" id="fruit_option" value="others"> Others</li>
</ul>
<div class="col-lg-12 mb-30" id="fruit" class="row">
<label><b>insert fruit name you wish </b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="text" id="fruit_name">
</div>
</div>
<!-- more form field -->
<br><br>
<button onclick="submit()">Submit</button>
</div>
</div>

Answer 2

您将输入的值推送到选中"其他"复选框时fruit_temp，而不是在提交表单时推送

。相反，您应该在变量中存储复选框是否处于选中状态，然后在单击提交按钮时，检查变量是否true。如果是，将输入的值推送到数组中，处理数组，然后再次检查变量是否true。如果是，请从数组中删除最后一项。

let fruit_temp = [];
var isOtherChecked = false;
$(document).ready(function() {

$("#fruit").hide();
$("#fruit_option").change(function() {
if ($("#fruit_option").is(':checked')) {
$("#fruit").show();
} else {
$("#fruit").hide();
}
});
$('input[name="chk_fruit"]').change(function() {
fruit_temp = [];
$('input[name="chk_fruit"]:checked').each(function() {
if (this.value != 'others') {
fruit_temp.push($(this).val());
} else {
isOtherChecked = true;
}
});
});
});
const submit = () => {
let formData = new FormData();
//more formData
if (isOtherChecked) {
fruit_temp.push($('#fruit_name').val())
}
formData.append('Fruit', fruit_temp);
if (isOtherChecked) {
fruit_temp.pop() //we know the last item has to be the value of the input field
}
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><b>Favourite Fruit</b></label><br>
<div class="form-group">
<ul>
<li><input type="checkbox" name="chk_fruit" value="Apple"> Apple</li>
<li><input type="checkbox" name="chk_fruit" value="Manggo"> Manggo</li>
<li><input type="checkbox" name="chk_fruit" value="Honeydew"> Honeydew</li>
<li><input type="checkbox" name="chk_fruit" value="Orange"> Orange</li>
<li><input type="checkbox" name="chk_fruit" id="fruit_option" value="others"> Others</li>
</ul>
<div class="col-lg-12 mb-30" id="fruit" class="row">
<label><b>insert fruit name you wish </b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="text" id="fruit_name">
</div>
</div>
<!-- more form field -->
<br><br>
<button onclick="submit()">Submit</button>
</div>
</div>

Answer 3

只需更改复选框值属性！

const
myForm    = document.querySelector('#my-form')
, chkOption = document.querySelector('#chkOption > input')
, fruitOpt  = document.querySelector('#fruit-option')
;
// init clear
myForm.reset()

chkOption.onchange =_=>
{
fruitOpt.classList.toggle('notVisible', !chkOption.checked)
}
myForm.fruit_name.oninput =_=>
{
chkOption.value = myForm.fruit_name.value.trim()
}
myForm.onsubmit = e =>
{
e.preventDefault()
let result = Array
.from( new FormData(myForm).entries())
.reduce((a,[k,v])=>{if (k==='chk_fruit') a.push(v);return a},[])
.join(', ')
console.log( result )
setTimeout(()=>
{
console.clear()
myForm.reset()
fruitOpt.classList.add('notVisible')
}, 2000);
}

label,
button {
display : block;
float   : left;
clear   : both;
margin  : .1em;
}
.notVisible {
visibility: hidden;
}

.as-console-wrapper { max-height:100% !important; top:0; left:30% !important; width:70%; }
.as-console-row { background-color: yellow; }
.as-console-row::after  { display:none !important; }

<form id="my-form">
<label><input type="checkbox" name="chk_fruit" value="Apple"   > Apple    </label>
<label><input type="checkbox" name="chk_fruit" value="Manggo"  > Manggo   </label>
<label><input type="checkbox" name="chk_fruit" value="Honeydew"> Honeydew </label>
<label><input type="checkbox" name="chk_fruit" value="Orange"  > Orange   </label>
<label id="chkOption">
<input type="checkbox" name="chk_fruit" value="" > 
other 
</label>
<label id="fruit-option" class="notVisible" >
<b>insert fruit name you wish </b><br>
<input type="text" name="fruit_name" placeholder="other fruit">
</label> 
<button type="submit">submit</button>
</form>