Form表单之复选框checkbox操作

input复选(checkbox)：

<label>input复选1组：</label>

<input type="checkbox" name="checkbox1" value="checkbox复选1" checked="checked"/>checkbox复选1

<input type="checkbox" name="checkbox1" value="checkbox复选2"/>checkbox复选2

<input type="checkbox" name="checkbox1" value="checkbox复选3" checked="checked"/>checkbox复选3

相同name的单选项为同一组复选,checked="checked"选中某复选项；

1.checkbox选中项的值和索引（实际应该叫序号，index()的值从1开始，不是0）

<label>input复选2组：</label>

<input type="checkbox" name="checkbox2" value="checkbox复选1"/>checkbox复选1

<input type="checkbox" name="checkbox2" value="checkbox复选2" checked="checked"/>checkbox复选2

<input type="checkbox" name="checkbox2" value="checkbox复选3" checked="checked"/>checkbox复选3

$("input[name=‘checkbox2‘]:checked").val();//选中项的第一个值

$("input[name=‘checkbox2‘]:checked").each(function(){

alert("checkbox2组选中项的值："+$(this).val());//遍历选中项的值

});

var index1 = $("input[name=‘checkbox2‘]:checked").index();//选中项的第一个序号

alert("checkbox2组选中项的项："+index1);

$("input[name=‘checkbox2‘]:checked").each(function(){//遍历选中项的序号

alert("checkbox2组选中项的项："+$(this).index());//遍历选中项的索引

});

2.checkbox值对应的索引和索引对应的值

<label>input复选3组：</label>

<input type="checkbox" name="checkbox3" value="checkbox复选1"/>checkbox复选1

<input type="checkbox" name="checkbox3" value="checkbox复选2"/>checkbox复选2

<input type="checkbox" name="checkbox3" value="checkbox复选3"/>checkbox复选3

checkbox索引对应的值：$("input[name=‘checkbox3‘]").eq(2).val();//checkbox复选3；eq(索引值)，索引从0开始；

checkbox值对应的索引：$("input[name=‘checkbox3‘][value=checkbox复选2]").index();//2；index(序号)，序号从1开始

$("input[name=‘checkbox3‘]:first").val();//checkbox第一项的值

$("input[name=‘checkbox3‘]:first").index();//checkbox第一项的索引

$("input[name=‘checkbox3‘]:last").val();//checkbox最后一项的值

$("input[name=‘checkbox3‘]:last").index();//checkbox最后一项的索引

3.checkbox选中和取消选中：

<label>input复选4组：</label>

<input type="checkbox" name="checkbox4" value="checkbox复选1"/>checkbox复选1

<input type="checkbox" name="checkbox4" value="checkbox复选2"/>checkbox复选2

<input type="checkbox" name="checkbox4" value="checkbox复选3"/>checkbox复选3

$("input[name=‘checkbox4‘][value=‘checkbox复选1‘]").prop("checked",true);//选中某值对应的项

$("input[name=‘checkbox4‘][value=‘checkbox复选1‘]").prop("checked",false);//取消选中某值对应的项

$("input[name=‘checkbox4‘][value=‘checkbox复选2‘]").prop("checked","checked");//选中某值对应的项

$("input[name=‘checkbox4‘][value=‘checkbox复选2‘]").removeProp("checked");//取消选中某值对应的项

$("input[name=‘checkbox4‘]").eq(1).prop("checked",true);//选中某索引对应的项

$("input[name=‘checkbox4‘]").eq(1).prop("checked",false);//取消选中某索引对应的项

$("input[name=‘checkbox4‘]").eq(2).prop("checked","checked");//选中某索引对应的项

$("input[name=‘checkbox4‘]").eq(2).removeProp("checked");//取消选中某索引对应的项

4.checkbox删除项：

<label>input复选5组：</label>

<input type="checkbox" name="checkbox5" value="checkbox复选1"/>checkbox复选1

<input type="checkbox" name="checkbox5" value="checkbox复选2"/>checkbox复选2

<input type="checkbox" name="checkbox5" value="checkbox复选3"/>checkbox复选3

$("input[name=‘checkbox5‘]").eq(1).remove();或者

$("input[name=‘checkbox5‘][value=checkbox复选2]").remove(); 移除复选的项；

参考自：http://www.jb51.net/article/77946.htm

html内容：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8"/>

<title>Form表单复选操作示例1</title>

<style>

body{font-size:14px;}

label{display:inline-block;width:8em;margin-left:0.3em;margin-right:0.3em;}

input{margin-top:0.3em;margin-bottom:0.3em;}

.tipmsg{font-size:14px;color:#f00;}

</style>

</head>

<body>

<form>

<h2>input复选(checkbox)：</h3>

<div>

<label>input复选1组：</label>

<input type="checkbox" name="checkbox1" value="checkbox复选1" checked="checked"/>checkbox复选1

<input type="checkbox" name="checkbox1" value="checkbox复选2"/>checkbox复选2

<input type="checkbox" name="checkbox1" value="checkbox复选3" checked="checked"/>checkbox复选3

<span class="tipmsg">

相同name的单选项为同一组复选,checked="checked"选中某复选项；

</span>

</div>

<h3>checkbox选中项的值和索引（实际应该叫序号，index()的值从1开始，不是0）</h3><hr>

<div>

<label>input复选2组：</label>

<input type="checkbox" name="checkbox2" value="checkbox复选1"/>checkbox复选1

<input type="checkbox" name="checkbox2" value="checkbox复选2" checked="checked"/>checkbox复选2

<input type="checkbox" name="checkbox2" value="checkbox复选3" checked="checked"/>checkbox复选3

<span class="tipmsg"><br>

$("input[name=‘checkbox2‘]:checked").val();//只返回选中项的第一个值<br>

each遍历获取多个选中项的值；<br>

$("input[name=‘checkbox2‘]:checked").val();//只返回选中项的第一个序号<br>

each遍历获取多个选中项的序号；<br>

</span>

</div>

<h3>checkbox值对应的索引和索引对应的值</h3><hr>

<div>

<label>input复选3组：</label>

<input type="checkbox" name="checkbox3" value="checkbox复选1"/>checkbox复选1

<input type="checkbox" name="checkbox3" value="checkbox复选2"/>checkbox复选2

<input type="checkbox" name="checkbox3" value="checkbox复选3"/>checkbox复选3

<span class="tipmsg"><br>

$("input[name=‘checkbox3‘]").eq(2).val();//checkbox复选3；eq(索引值)，索引从0开始<br>

$("input[name=‘checkbox3‘][value=checkbox复选2]").index();//2；index(序号)，序号从1开始<br>

$("input[name=‘checkbox3‘]:first").val();//checkbox第一项的值<br>

$("input[name=‘checkbox3‘]:first").index();//checkbox第一项的索引<br>

$("input[name=‘checkbox3‘]:last").val();//checkbox最后一项的值<br>

$("input[name=‘checkbox3‘]:last").index();//checkbox最后一项的索引

</span>

</div>

<h3>checkbox选中和取消选中</h3><hr>

<div>

<label>input复选4组：</label>

<input type="checkbox" name="checkbox4" value="checkbox复选1"/>checkbox复选1

<input type="checkbox" name="checkbox4" value="checkbox复选2"/>checkbox复选2

<input type="checkbox" name="checkbox4" value="checkbox复选3"/>checkbox复选3

<span class="tipmsg"><br>

$("input[name=‘checkbox4‘][value=‘checkbox复选1‘]").prop("checked",true);//选中某值对应的项<br>

$("input[name=‘checkbox4‘][value=‘checkbox复选1‘]").prop("checked",false);//取消选中某值对应的项<br>

$("input[name=‘checkbox4‘][value=‘checkbox复选2‘]").prop("checked","checked");//选中某值对应的项<br>

$("input[name=‘checkbox4‘][value=‘checkbox复选2‘]").removeProp("checked");//取消选中某值对应的项<br>

$("input[name=‘checkbox4‘]").eq(1).prop("checked",true);//选中某索引对应的项<br>

$("input[name=‘checkbox4‘]").eq(1).prop("checked",false);//取消选中某索引对应的项<br>

$("input[name=‘checkbox4‘]").eq(2).prop("checked","checked");//选中某索引对应的项<br>

$("input[name=‘checkbox4‘]").eq(2).removeProp("checked");//取消选中某索引对应的项

</span>

</div>

<h3>checkbox删除项</h3><hr>

<div>

<label>input复选5组：</label>

<input type="checkbox" name="checkbox5" value="checkbox复选1"/>checkbox复选1

<input type="checkbox" name="checkbox5" value="checkbox复选2"/>checkbox复选2

<input type="checkbox" name="checkbox5" value="checkbox复选3"/>checkbox复选3

<span class="tipmsg"><br>

</span>

</div>

</form>

<script src="./jquery-1.x.min.js"></script>

<script>

$(function(){

var val1 = $("input[name=‘checkbox2‘]:checked").val();//获取单个复选项的值；如果有多项选中，只返回所有选中项索引最小的值；

//alert(val1);

$("input[name=‘checkbox2‘]:checked").each(function(){

//alert("checkbox2组选中项的值："+$(this).val());//遍历选中项的值

});

var index1 = $("input[name=‘checkbox2‘]:checked").index();

//alert("checkbox2组选中项的项："+index1);

$("input[name=‘checkbox2‘]:checked").each(function(){

//alert("checkbox2组选中项的项："+$(this).index());//遍历选中项的索引

});

var val2 = $("input[name=‘checkbox3‘]").eq(2).val();

//alert("checkbox3索引2对应的值为："+val2);//checkbox复选3(eq(索引值)索引值从0开始)

var index2 = $("input[name=‘checkbox3‘][value=checkbox复选2]").index();

//alert("checkbox3值checkbox复选2对应的项为："+index2);

var var3 = $("input[name=‘checkbox3‘]:first").val();//checkbox第一项的值

//alert(var3);

var index3 = $("input[name=‘checkbox3‘]:first").index();//checkbox第一项的索引

//alert(var3);

//alert(index3);

var var4 = $("input[name=‘checkbox3‘]:last").val();//checkbox最后一项的值

//alert(var4);

var index4 = $("input[name=‘checkbox3‘]:last").index();//checkbox最后一项的索引

//alert(index4);

//$("input[name=‘checkbox4‘][value=‘checkbox复选1‘]").prop("checked",true);//选中某值对应的项

//$("input[name=‘checkbox4‘][value=‘checkbox复选1‘]").prop("checked",false);//取消选中某值对应的项

//$("input[name=‘checkbox4‘][value=‘checkbox复选2‘]").prop("checked","checked");//选中某值对应的项

//$("input[name=‘checkbox4‘][value=‘checkbox复选2‘]").removeProp("checked");//取消选中某值对应的项

$("input[name=‘checkbox4‘]").eq(1).prop("checked",true);//选中某索引对应的项

$("input[name=‘checkbox4‘]").eq(1).prop("checked",false);//取消选中某索引对应的项

$("input[name=‘checkbox4‘]").eq(2).prop("checked","checked");//选中某索引对应的项

$("input[name=‘checkbox4‘]").eq(2).removeProp("checked");//取消选中某索引对应的项

//$("input[name=‘checkbox5‘]").eq(1).remove();

$("input[name=‘checkbox5‘][value=checkbox复选2]").remove();

});

</script>

</body>

</html>

---------------------

作者：陈_三

来源：CSDN

原文：https://blog.csdn.net/qinshijangshan/article/details/54408004?utm_source=copy

版权声明：本文为博主原创文章，转载请附上博文链接！

原文地址：https://www.cnblogs.com/yunshangwuyou/p/9788716.html

时间： 2024-12-13 13:00:07

Form表单之复选框checkbox操作的相关文章

表单提交复选框（checkbox）注意事项

例子: <form action="a.php" method="post"> <input type="checkbox" name="hobby[]" value="唱歌"/>唱歌 <input type="checkbox" name="hobby[]" value="跳舞"/>跳舞 <input t

及时从数据库中取得数据填放进Form表单的多选框中

#写上以下代码就不用担心数据库添加了数据而不能及时获取了 def __init__(self, *args, **kwargs): #每次创建Form1对象时执行init方法 super(Form1, self).__init__(*args, **kwargs) self.fields['book_type'] = forms.CharField( widget=forms.widgets.Select(choices=models.BookType.objects.values_list('

bootstrap-表单控件——复选框checkbox和单选择按钮radio

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>表单控件--复选框checkbox和单选择按钮radio</title>

php 判断复选框checkbox是否被选中

php 判断复选框checkbox是否被选中 复选框checkbox在php表单提交中经常被使用到,本文章通过实例向大家介绍php如何判断复选框checkbox中的值是否被选中,需要的朋友可以参考一下本文章的实例. 本文章向大家介绍两个知识点: php表单提交如何获取复选框checkbox的值 php如何判断复选框checkbox中的值是否被选中 下面我们分别对这两个知识点进行讲解: 1.php如何获取复选框checkbox的值 首先我们来创建一个表单: <form action ="Ha

表单操作-复选框

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单操作-复选框</title> <style> *{margin:0; padding: 0;} li{list-style: none;} .clearfix:before,.clearfix:after{display: table; co

单选按钮RadioGroup与复选框CheckBox

在AndroidApp应用中,单选按钮和复选框也是经常使用的,下面我们一起学习一下.我们需要学习Android中的基本控件:(1)单选按钮RadioGroup.(2)复选框CheckBox. 一.设计登录窗口 打开"res/layout/activity_main.xml"文件.  1.分别从工具栏向activity拖出1个单选按钮列表RadioGroup(注意自动包含3个单选按钮RadioButton).2个复选框CheckBox.1个按钮Button.这3个控件均来自Form Wi

不同版本的jquery的复选框checkbox的相关问题

在尝试写复选框时候遇到一个问题,调试了很久都没调试出来,极其郁闷: IE10,Chrome,FF中,对于选中状态,第一次$('#checkbox').attr('checked',true)可以实现 但是当通过代码清除选中,下次再通过代码 $('#checkbox').attr('checked',true) 去选中时 虽然代码中有checked='checked',但是画面表现都没有打勾. 例如如下的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

ExtJS-Grid框增加复选框checkbox

var gridColumnModel = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), new Ext.grid.CheckboxSelectionModel({ singleSelect: false }),//复选框 { header : '信息ID', dataIndex : 'INFO_ID', sortable : true, align : 'center', width : 80 }, { header : '商品I

吾八哥学Selenium(三)：操作复选框checkbox/单选框radio的方法

复选框checkbox和单选框radio是web网站里经常会使用到的两个控件,那么在web自动化测试的时候如何利用Selenium来操作这俩控件呢?今天我们就来简单入门练习一下! html测试页面代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>学Python网 - seleni