JavaScript Tutorial/jQuery/Form CheckBox

Материал из Web эксперт
Перейти к: навигация, поиск

30. Check the check box

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
               $("#single").val("Single2");
               $("#multiple").val(["Multiple2", "Multiple3"]);
               $("input").val(["check1","check2", "radio1" ]);
       });
   </script>
   <style>
     .selected { color:red; }
     .highlight { background:yellow; }
   </style>    
 </head>
 <body>
   <body>
         <select id="single">
           <option>1</option>
           <option>2</option>
         </select>
         <select id="multiple" multiple="multiple">
           <option selected="selected">Multiple</option>
           <option>Multiple2</option>
           <option selected="selected">Multiple3</option>
         </select>
<input type="checkbox" name="checkboxname" value="check1"/> check1 <input type="checkbox" name="checkboxname" value="check2"/> check2 <input type="radio" name="r" value="radio1"/> radio1 <input type="radio" name="r" value="radio2"/> radio2 </body>

</html></source>


30. Get checkbox from form controls

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
       var input = $("input:checkbox");
       $("div").text(input.length);
       
       
   });
   </script>
 </head>
 <body>
    <form>
     <input type="checkbox" />
   </form>
 </body>

</html></source>


30. Get checked checkbox

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
     
             var n = $("input:checked").length;
             $("div").text(n);
         
       });
   </script>
 </head>
 <body>
   <form>
   <input type="checkbox" name="newsletter" checked="checked" />
   <input type="checkbox" name="newsletter" checked="checked"/>
 </form>
 </body>

</html></source>


30. Preset checkbox

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
         $("input").val(["check1","check2", "radio1" ]);
    
       });
   </script>
 </head>
 <body>
   <body>
     <input type="checkbox" name="checkboxname" value="check1"/> check1
     <input type="checkbox" name="checkboxname" value="check2"/> check2
     <input type="radio"  name="r" value="radio1"/> radio1
     <input type="radio"  name="r" value="radio2"/> radio2
 </body>

</html></source>