碼上快樂

相關內容    簡體    繁體

Form表單之復選框checkbox操作

本文轉載自   查看原文   2018-10-14 23:14   28008 
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> 
          
 
          
 
 
         
 
         
 
 
        
 
         
         
        

          原文：https://blog.csdn.net/qinshijangshan/article/details/54408004?utm_source=copy  
        
 
       
 
        
       
 
        
 
 
       
 
        
       
 
       
 
      
 
      
 
      
 
     
 
     
 
      
 
      
 
        
       
免責聲明！
 
       
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
 
      
 
      

      
 
     
 
    
 
     
    
 
     
 
      猜您在找 
        WeUI——CheckBox表單復選框  
        jquery對復選框(checkbox)的操作（精華）  
        [原創]Matlab 之復選框使用  
        表單提交復選框（checkbox）注意事項  
        HTML——input之復選框  
        三、winForm-DataGridView操作——DataGridView 操作復選框checkbox  
        html 復選框checkbox  
        checkbox復選框居中  
        Ext的TreeGrid增加復選框(CheckBox)與復選框操作  
        Selenium-測試對象操作之：復選框checkbox  
      
 
      
 
     
 
    
 
   
 
  
 
  

    
  
 
  
 
   
 
   
 
   
 
    粵ICP備18138465號  
    © 2018-2025 CODEPRJ.COM