jquery 操作单选框，复选框，下拉列表

最新推荐文章于 2022-08-16 23:52:54 发布

原创最新推荐文章于 2022-08-16 23:52:54 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #C #C++ #C# #JavaScript #ViewUI

Jquery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用HTML和JavaScript操作复选框、单选按钮及下拉框等表单元素，包括全选、单选、获取选中项等功能实现。

1. 复选框操作：

Html代码

<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>

<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代码

$(document).ready(function() {
$('#checkAll').click(checkAll); // 全选
$('#checkFootball').click(checkFootball); // 单选足球
});

$(document).ready(function() {
     $('#checkAll').click(checkAll);	// 全选
					
     $('#checkFootball').click(checkFootball); // 单选足球
});

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

Js代码

function checkAll()
{
$('input[type="checkbox"][name="item"]').attr("checked", true);
// $('[name="item"]:checkbox').attr("checked", true);
}

function checkAll()
{
   $('input[type="checkbox"][name="item"]').attr("checked", true);
					
   // $('[name="item"]:checkbox').attr("checked", true);
}

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

选中足球

Js代码

function checkFootball()
{
$("[name='item']:checkbox").each(function() {
if (this.value == 'football')
{
this.checked = true;
}
})
}

function checkFootball()
{
   $("[name='item']:checkbox").each(function() {
       if (this.value == 'football')
       {
          this.checked = true;
       }
   })	
}

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

2. 单选按钮操作：

Html代码

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="获得字母"/>

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代码

$(document).ready(function() {
// 数据初始化选择B。
$('[name="item"]:radio').each(function() {
if (this.value == 'B')
{
this.checked = true;
}
});
// 绑定获得字母的事件
$('#getLetter').click(getLetter);
});

$(document).ready(function() {					
   // 数据初始化选择B。
   $('[name="item"]:radio').each(function() {
       if (this.value == 'B')
       {
  	      this.checked = true;
       }	
    });

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

获得所选中的字母

Js代码

function getLetter()
{
alert('获得的字母为：' + $('[name="item"][checked=true]:radio').val());
}

function getLetter()
{
  alert('获得的字母为：' + $('[name="item"][checked=true]:radio').val());
}

3. 下拉框(列表)操作

Html代码

<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="清空列表"/>

<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代码

$(document).ready(function() {
$('#addOptions').click(addOptions); // 为列表添加元素
$('#getSelectedOption').click(getSelectedOption); // 获得选中的元素
$('#clearOptions').click(clearOptions); // 清楚列表中的元素
$('#addOptions').click(); // 触发为列表添加元素事件
});

$(document).ready(function() {
    $('#addOptions').click(addOptions);  // 为列表添加元素
					   
    $('#getSelectedOption').click(getSelectedOption);  // 获得选中的元素
					
    $('#clearOptions').click(clearOptions); // 清楚列表中的元素
					
    $('#addOptions').click(); // 触发为列表添加元素事件
});

追加元素

Js代码

function addOptions()
{
var selectContainer = $('#choose');
for (var i = 0; i < 5; i++)
{
var option = $('<option></option>').text('choose' + i).val(i);
selectContainer.append(option);
}
}

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代码

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());
}

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代码