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(); 移除复选的项;

经验分享 程序员 微信小程序 职场和发展