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>

Form表單之複選框checkbox操作

Ps UI設計如何簡單快捷切圖

sql電商常用表基本字段

PS：如何把照片裏的多餘的一個人P掉

在PS中怎樣把一個圖案摳出來，放到另一個圖案中

layui框架部分功能介紹

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結