用JavaScript显示复选框的结果
Show result from checkbox with JavaScript
我想用javascript显示我的复选框的结果我需要用php
把它发送到数据库每个复选框都有一列
如果复选框被选中,我将变量插入到我的数据库
HTML代码和javascript
var checks = document.getElementsByClassName('justtest');
var str = '';
for( i=0; i<3; i++){
if(checks[i].checked === true){
str += checks[i].value + " ";
}
}
alert(str);
<div class="form-group">
<div class="col-md-3">
<div class="checkbox">
<label>
<input type="checkbox" value="test1" class="justtest" > Test1
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<div class="checkbox">
<label>
<input type="checkbox" value="test2" class="justtest"> test2
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<div class="checkbox">
<label>
<input type="checkbox" value="test3" class="justtest"> test3
</label>
</div>
</div>
</div>
我试着这样做,但没有任何结果
var checks = document.getElementsByClassName('justtest');
var str = checks.length;
for( i=0; i<3; i++){
if(checks[i].checked === true){
str[i]= checks[i].value;
}
}
alert(str[0]);
alert(str[1]);
alert(str[2]);
对您的代码进行了少量更改,str是一个结果数组,并添加了一个按钮,该按钮将执行检查功能,因为现在脚本只执行一次,然后您甚至可以更改选择任何选项
var getValues = function () {
var str = [];
var checks = document.getElementsByClassName('justtest');
for(var i=0; i<checks.length; i++){
if(checks[i].checked){
str.push( checks[i].value );
}
}
for( var x = 0; x < str.length; x++){
alert (str[x]);
}
}
<div class="form-group">
<div class="col-md-3">
<div class="checkbox">
<label>
<input type="checkbox" value="test1" class="justtest" > Test1
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<div class="checkbox">
<label>
<input type="checkbox" value="test2" class="justtest"> test2
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<div class="checkbox">
<label>
<input type="checkbox" value="test3" class="justtest"> test3
</label>
</div>
<button onclick="getValues()">Check</button>
</div>
</div>
可以从HTML的角度来处理这个问题,在那里你给所有的复选框相同的输入名称(并在它之后使用[]),然后让表单的post把它带到你的php,你的php会把它看作数组,从javascript结束你也得到值。
首先让我给你们看一下它的HTML版本
你的每个输入字段应该像这样
<input type="checkbox" name="justtest[]" value="owk 1">,
<input type="checkbox" name="justtest[]" value="owk 2">
注释 justtest[]命名
当你做form post时,你可以使用你喜欢的任何循环如
foreach ($_POST["justtest"] as $key => $value) {
echo $value;
}
而从javascript像你所做的上面Marcin C在本页的回答仍然
如果不满意,这里有另一种javascript方法可能也会有所帮助(运行代码片段来查看它的作用)
function getInput(){
var values = [];
var inputs = document.getElementsByName("justtest[]");
for (var i = 0; i <inputs.length; i++) {
var inp=inputs[i];
if(inp.checked){
values.push(inp.value);
}
//alert("justtest["+i+"].value="+inp.value); this returns all with their value , we check for only checked ones
}
alert (values); //alert our values here
}
<input type="checkbox" name="justtest[]" value="owk 1">
<input type="checkbox" name="justtest[]" value="owk 2">
<input type="checkbox" name="justtest[]" value="owk 3">
<input type="checkbox" name="justtest[]" value="owk 4">
<button onclick="getInput()">Get Input<button>
是否在文档的头部添加了脚本标签?如果是这样,该代码将总是失败,因为文档将没有初始化复选框以能够检索它们。
尝试将脚本移动到页面底部(刚好在结束body标签上方)
相关文章:
- Javascript验证(gen_validatorv4.js)-基于复选框结果
- 在数据库(JSP PAGE)中获取多个复选框结果
- 如何根据角度中的复选框选择过滤结果
- 使用复选框筛选结果
- 复选框筛选结果
- 在PHP结果中添加复选框,并在一段时间后使用java逐个打开它们
- Javascript错误,根据其他复选框的结果更新复选框/按钮
- 标签标签中的复选框:Chrome和Firefox中的不同结果
- Javascript - 从表单中获取复选框值并获取随机结果
- 如何在带有复选框按钮的 HTML 弹出窗口中显示结果
- 如何将复选框的值传递给 MVC5 中的操作结果
- 如何查找选中的复选框并将其传递给 MVC 中的操作结果
- 结果是检查多个复选框值并更新表数据
- Javascript:创建循环以连接选中复选框的结果
- 循环检查选中的复选框,然后显示结果
- 如果选中复选框,则将结果过滤到前5个最高标记
- Postgre使用Ajax函数在带有复选框的数据库中进行多记录删除查询,不会返回任何结果;不起作用
- 用于生成SQL结果的复选框选项
- 用于组合循环、文本、复选框和结果的JavaScript代码
- 使用复选框将JSON结果解析为对象