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(); 移除複選的項;