计数选中的复选框
Count checked checkboxes
我是HTML的新手,我在HTML页面的表单上有一个复选框列表。
每行上的每个复选框代表不同的类别"I"、"D"、"C"answers"S"。
我的部分代码如下:
<form>
1.<input type="checkbox" name="Personality_1.1" value="I"/>Animated  
<input type="checkbox" name="Personality_1.2" value="D" />Adventurous  
<input type="checkbox" name="Personality_1.3" value="C" />Analytical  
<input type="checkbox" name="Personality_1.4" value="S" />Adaptable<br /><br />
2.<input type="checkbox" name="Personality_2.1" value="I"/>Playful  
<input type="checkbox" name="Personality_2.2" value="D" />Persuasive  
<input type="checkbox" name="Personality_2.3" value="C" />Persistent  
<input type="checkbox" name="Personality_2.4" value="S" />Peaceful<br /><br />
3.<input type="checkbox" name="Personality_3.1" value="I"/>Sociable  
<input type="checkbox" name="Personality_3.2" value="D" />Strong Willed  
<input type="checkbox" name="Personality_3.3" value="C" />Self-sacraficing  
<input type="checkbox" name="Personality_3.4" value="S" />Submissive<br /><br />
我需要找出选中了多少个值"I"复选框,选中了多少值"D"复选框等等,然后在提交表单时显示每个类别的总数。
例如:"检查了五个D"检查了三个C"
有没有一种方法可以用Javascript或PHP做到这一点?如果是的话,有人能帮我想办法吗?
好吧,使用PHP,假设您使用POST:提交表单
$counts = array_count_values($_POST);
您将得到一个关联数组,其中的值作为键,计数作为值。因此,如果例如检查了3个D
,则$counts['D']
将保持"3"。
例如,您可以使用以下内容:
window.onload = function () {
document.getElementById("btn1").onclick = function () {
var allChk = document.getElementsByTagName("input"),
counts = {},
i, j, cur, val;
for (i = 0, j = allChk.length; i < j; i++) {
cur = allChk[i];
if (cur.type === "checkbox") {
if (!(cur.value in counts)) {
counts[cur.value] = 0;
}
if (cur.checked) {
counts[cur.value]++;
}
}
}
for (val in counts) {
console.log("There are " + counts[val] + " " + val + "'s checked");
}
};
};
演示:http://jsfiddle.net/Dwjez/1/
选中一些复选框后,单击按钮,然后查看console
以查看结果。它只是找到所有复选框,并将每个值的复选框数存储在对象文字中。。。最后一个循环就是在控制台中打印结果。
这只是事件处理的一个简单示例,但我建议查看addEventListener与onclick,以了解处理事件的另一种方法(使用addEventListener
)。
jquery-:
var numberOfCheckboxesSelected = $('input[type=checkbox]:checked').length;
javascript--:
var checkboxLength = document.forms["formName"].elements["checkbox[]"].length;
var checkboxes = document.forms["formName"].elements["checkbox[]"];
for(var i = 0; i < checkboxLength; ++i) {
if(checkboxes[i].checked) {
// do stuff
}
}
怎么样。。。
var getCount = function(type) {
return document.querySelectorAll('input[value='+type+']:checked').length;
}
alert(getCount('A') + "As have been selected");
而且看起来你最好使用一个无线电组而不是复选框。通过查看您的html,您希望用户能够在每个部分中选择多个项目吗?
这是您想要的代码。试试看,让我知道。
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
<FORM NAME="f1" action="next_page.php" method="post">
<input type="checkbox" name="chkGuar[]" value="mike"> Mike<br />
<input type="checkbox" name="chkGuar[]" value="joy"> Joy<br />
<input type="checkbox" name="chkGuar[]" value="harry"> harry<br />
<input type="checkbox" name="chkGuar[]" value="watson"> watson<br />
<input type="checkbox" name="chkGuar[]" value="george"> george<br />
<input type="checkbox" name="chkGuar[]" value="peter"> Peter<br />
<input type="submit" name="chksbmt" value="Send" />
<!-- <div id="myrow" style="visibility:hidden">
<input type = text name ='txtGRTNo' tabindex = 19 size="20">
</div>
<div width="338" align="left" colspan="3" height="12"></div> !-->
</FORM>
</BODY>
</HTML>
next_page.php
<?php
if(isset($_POST['chksbmt'])){
$counts = count($_POST['chkGuar']);
echo "this is the next page. you checked $counts checkbox <br /><br />";
for($i=1;$i<=$counts;$i++){
echo "<input type='text' style='border:1px solid #000;' value='your text box here' /><br/><br/>";
}
}
您应该这样编写表单代码:
<form>
1.<input type="checkbox" name="chkI[]" value="I1"/>Animated
<input type="checkbox" name="chkD[]" value="D1" />Adventurous
<input type="checkbox" name="chkC[]" value="C1" />Analytical
<input type="checkbox" name="chkS[]" value="S1" />Adaptable
2.<input type="checkbox" name="chkI[]" value="I2"/>Playful
<input type="checkbox" name="chkD[]" value="D2" />Persuasive
<input type="checkbox" name="chkC[]" value="C2" />Persistent
<input type="checkbox" name="chkS[]" value="S2" />Peaceful
3.<input type="checkbox" name="chkI[]" value="I3"/>Sociable
<input type="checkbox" name="chkD[]" value="D3" />Strong Willed
<input type="checkbox" name="chkC[]" value="C3" />Self-sacraficing
<input type="checkbox" name="chkS[]" value="S3" />Submissive
</form>
查看"name"和"value"属性。我让我改变了他们的价值观。
你说:
我需要找出选中了多少个值"I"复选框,选中了多少值"D"复选框等等,然后提交表单时显示每个类别的总数
如果你提交。。。
<?php
if(!empty($_GET['chkD'])) {
$counterChkD = 0;
foreach ($_GET['chkD'] as $chkD){
echo $chkD."'n";
//echoes the value set in the HTML form for each checked checkbox associated with the "D" value
//so, if I were to check "Adventurous", "Persuasive", and "Strong Willed" it would echo value D1, value D2, value D3.
$counterChkD++;
}
echo "# of 'D-CheckBoxes' checked: ".$counterChkD."'n";
}
?>
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 正在验证8个真/假复选框或复选框中的2个
- 为复选框javascript指定两个值
- 如何在单击复选框后调用控制器方法
- 从复选框和Selects-KnockoutJS中获取值的总和
- 选中多个具有相同名称的复选框
- 使用Jquery选择或取消选择ListView中的所有复选框
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- 使用$.ajax发布多个复选框
- AngularJS单选筛选不适用于Name、Description和Field4复选框值
- 使用jquery选中/取消选中单个复选框
- Angular JS Filter-通过3个复选框进行筛选
- 如果选中了多个复选框,如何添加事件
- Javascript复选框函数:;缺少:在属性id之后"
- JavaScript-切换“;全部检查”;复选框true/false
- 如何从javascript/jquery中的复选框中获取布尔值
- 在Ajax中捕获复选框值
- 显示隐藏复选框
- 如何使用javascript函数在gridview中按行启用/禁用复选框
- jquery中的复选框依赖项