1. 程式人生 > >Form表單之複選框checkbox操作

Form表單之複選框checkbox操作

input複選(checkbox):

  1. <label>input複選1組:</label>

  2. <input type="checkbox" name="checkbox1" value="checkbox複選1" checked="checked"/>checkbox複選1

  3. <input type="checkbox" name="checkbox1" value="checkbox複選2"/>checkbox複選2

  4. <input type="checkbox" name="checkbox1" value="checkbox複選3" checked="checked"/>checkbox複選3

相同name的單選項為同一組複選,checked="checked"選中某複選項;

1.checkbox選中項的值和索引(實際應該叫序號,index()的值從1開始,不是0)

  1. <label>input複選2組:</label>

  2. <input type="checkbox" name="checkbox2" value="checkbox複選1"/>checkbox複選1

  3. <input type="checkbox" name="checkbox2" value="checkbox複選2" checked="checked"/>checkbox複選2

  4. <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值對應的索引和索引對應的值

  1. <label>input複選3組:</label>

  2. <input type="checkbox" name="checkbox3" value="checkbox複選1"/>checkbox複選1

  3. <input type="checkbox" name="checkbox3" value="checkbox複選2"/>checkbox複選2

  4. <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選中和取消選中:

  1. <label>input複選4組:</label>

  2. <input type="checkbox" name="checkbox4" value="checkbox複選1"/>checkbox複選1

  3. <input type="checkbox" name="checkbox4" value="checkbox複選2"/>checkbox複選2

  4. <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刪除項:

  1. <label>input複選5組:</label>

  2. <input type="checkbox" name="checkbox5" value="checkbox複選1"/>checkbox複選1

  3. <input type="checkbox" name="checkbox5" value="checkbox複選2"/>checkbox複選2

  4. <input type="checkbox" name="checkbox5" value="checkbox複選3"/>checkbox複選3

$("input[name='checkbox5']").eq(1).remove();或者
$("input[name='checkbox5'][value=checkbox複選2]").remove(); 移除複選的項;