Form表單之複選框checkbox操做

時間 2019-11-07

原文原文鏈接

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>

<head>

<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

相同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

$("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

$("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

$("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>

</div>

</form>

$(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>

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。