淘先锋技术网

首页 1 2 3 4 5 6 7

1. 复选框操作:

Html代码 复制代码  收藏代码
  1. <form>  
  2.    您爱好的运动是:   
  3.    <input type="checkbox" name="item" value="football"/> football   
  4.    <input type="checkbox" name="item" value="basketball"/> basketball   
  5.    <input type="checkbox" name="item" value="badminton"/> badminton   
  6.    <input type="checkbox" name="item" value="pingpong"/> pingpong   
  7.    <input type="button" id="checkAll" value="全选"/>                   
  8.    <input type="button" id="checkFootball" value="选中足球"/>  
  9. </form>  
<form>
   您爱好的运动是:
   <input type="checkbox" name="item" value="football"/> football
   <input type="checkbox" name="item" value="basketball"/> basketball
   <input type="checkbox" name="item" value="badminton"/> badminton
   <input type="checkbox" name="item" value="pingpong"/> pingpong
   <input type="button" id="checkAll" value="全选"/>				
   <input type="button" id="checkFootball" value="选中足球"/>
</form>


绑定事件

Js代码 复制代码  收藏代码
  1. $(document).ready(function() {   
  2.      $('#checkAll').click(checkAll);    // 全选   
  3.                        
  4.      $('#checkFootball').click(checkFootball); // 单选足球   
  5. });  
$(document).ready(function() {
     $('#checkAll').click(checkAll);	// 全选
					
     $('#checkFootball').click(checkFootball); // 单选足球
});


选中所有的。 这里分别提供了两种方式进行选中。具体参见API中的属性和表单选择器

Js代码 复制代码  收藏代码
  1. function checkAll()   
  2. {   
  3.    $('input[type="checkbox"][name="item"]').attr("checked"true);   
  4.                        
  5.    // $('[name="item"]:checkbox').attr("checked", true);   
  6. }  
function checkAll()
{
   $('input[type="checkbox"][name="item"]').attr("checked", true);
					
   // $('[name="item"]:checkbox').attr("checked", true);
}


注: 全反选只需要将这里的 true 换成 false 即可。

选中足球

Js代码 复制代码  收藏代码
  1. function checkFootball()   
  2. {   
  3.    $("[name='item']:checkbox").each(function() {   
  4.        if (this.value == 'football')   
  5.        {   
  6.           this.checked = true;   
  7.        }   
  8.    })      
  9. }  
function checkFootball()
{
   $("[name='item']:checkbox").each(function() {
       if (this.value == 'football')
       {
          this.checked = true;
       }
   })	
}


注: 具体目的为了解决从后台取出数据,显示。这里并没有用jQuery的attr()和val()方法来设置选中和获得当前checkbox的值,改用了JavaScript原生的 Dom 方法,将比创建jQuery对象更有效。

2. 单选按钮操作:

Html代码 复制代码  收藏代码
  1. A B C D 您选择哪一个:<br/>  
  2. <input type="radio" name="item" value="A"/>A   
  3. <input type="radio" name="item" value="B"/>B   
  4. <input type="radio" name="item" value="C"/>C   
  5. <input type="radio" name="item" value="D"/>D   
  6. <input type="button" id="getLetter" value="获得字母"/>  
A B C D 您选择哪一个:<br/>
<input type="radio" name="item" value="A"/>A
<input type="radio" name="item" value="B"/>B
<input type="radio" name="item" value="C"/>C
<input type="radio" name="item" value="D"/>D
<input type="button" id="getLetter" value="获得字母"/>


初始化选中字母B

Js代码 复制代码  收藏代码
  1. $(document).ready(function() {                     
  2.    // 数据初始化选择B。   
  3.    $('[name="item"]:radio').each(function() {   
  4.        if (this.value == 'B')   
  5.        {   
  6.           this.checked = true;   
  7.        }       
  8.     });   
  9.   
  10.     // 绑定获得字母的事件    
  11.     $('#getLetter').click(getLetter);   
  12. });  
$(document).ready(function() {					
   // 数据初始化选择B。
   $('[name="item"]:radio').each(function() {
       if (this.value == 'B')
       {
  	      this.checked = true;
       }	
    });

    // 绑定获得字母的事件 
    $('#getLetter').click(getLetter);
});


获得所选中的字母

Js代码 复制代码  收藏代码
  1. function getLetter()   
  2. {   
  3.   alert('获得的字母为:' + $('[name="item"][checked=true]:radio').val());   
  4. }  
function getLetter()
{
  alert('获得的字母为:' + $('[name="item"][checked=true]:radio').val());
}



3. 下拉框(列表)操作

Html代码 复制代码  收藏代码
  1. <select multiple id="choose" style="width=100px;heigth=160px"></select>  
  2. <input id="addOptions" type="button" value="添加数据"/>  
  3. <input id="getSelectedOption" type="button" value="获得选中的值"/>  
  4. <input id="clearOptions" type="button" value="清空列表"/>  
<select multiple id="choose" style="width=100px;heigth=160px"></select>
<input id="addOptions" type="button" value="添加数据"/>
<input id="getSelectedOption" type="button" value="获得选中的值"/>
<input id="clearOptions" type="button" value="清空列表"/>


绑定事件,并为页面初始化数据

Js代码 复制代码  收藏代码
  1. $(document).ready(function() {   
  2.     $('#addOptions').click(addOptions);  // 为列表添加元素   
  3.                           
  4.     $('#getSelectedOption').click(getSelectedOption);  // 获得选中的元素   
  5.                        
  6.     $('#clearOptions').click(clearOptions); // 清楚列表中的元素   
  7.                        
  8.     $('#addOptions').click(); // 触发为列表添加元素事件   
  9. });  
$(document).ready(function() {
    $('#addOptions').click(addOptions);  // 为列表添加元素
					   
    $('#getSelectedOption').click(getSelectedOption);  // 获得选中的元素
					
    $('#clearOptions').click(clearOptions); // 清楚列表中的元素
					
    $('#addOptions').click(); // 触发为列表添加元素事件
});


追加元素

Js代码 复制代码  收藏代码
  1. function addOptions()   
  2. {   
  3.    var selectContainer = $('#choose');   
  4.                    
  5.    for (var i = 0; i < 5; i++)   
  6.    {   
  7.       var option = $('<option></option>').text('choose' + i).val(i);   
  8.       selectContainer.append(option);   
  9.    }   
  10. }  
function addOptions()
{
   var selectContainer = $('#choose');
				
   for (var i = 0; i < 5; i++)
   {
      var option = $('<option></option>').text('choose' + i).val(i);
      selectContainer.append(option);
   }
}


获得选中的元素

Js代码 复制代码  收藏代码
  1. function getSelectedOption()   
  2. {   
  3.        
  4.     var options = $('#choose > option:selected');   
  5.                      
  6.     $.each(options, function () {   
  7.       alert('option: ' + this.value);   
  8.     });   
  9.                      
  10.                         
  11.     $('#choose > option:selected').each(function() {   
  12.       alert('option2: ' + this.value);   
  13.      });   
  14.   
  15.      // 直接弹出数据, 如果是对下拉框,则直接弹出数据,如果是列表并且选择了多个数   
  16.      //   据,将数据以','分隔显示     
  17.      alert('val: ' + $('#choose').val());   
  18. }  
function getSelectedOption()
{
     /* 逐个弹出每个元素 */
    var options = $('#choose > option:selected');
				  
    $.each(options, function () {
 	  alert('option: ' + this.value);
    });
				  
    /* 逐个弹出每个元素,第一种的简写 */				  
    $('#choose > option:selected').each(function() {
	  alert('option2: ' + this.value);
     });

     // 直接弹出数据, 如果是对下拉框,则直接弹出数据,如果是列表并且选择了多个数
     //   据,将数据以','分隔显示  
     alert('val: ' + $('#choose').val());
}


清空列表

Js代码 复制代码  收藏代码
  1. function clearOptions()   
  2. {   
  3.     $('#choose').empty();   
  4. }