单选框，复选框，下拉框的取值

最新推荐文章于 2020-11-23 15:20:14 发布
最新推荐文章于 2020-11-23 15:20:14 发布
阅读量244 收藏
点赞数
文章标签： JavaScript Apple HTML ViewUI

1.单选框

<html>
<head>
<script type="text/javascript">
function check(fruit)
  {
      alert("你喜欢的水果是："+fruit)
  }
</script>
</head>
<body>

<p>您喜欢哪种水果？</p>

<form>
<input type="radio" name="fruit" οnclick="check(this.value)" value="苹果">apple<br />
<input type="radio" name="fruit" οnclick="check(this.value)" value="香蕉">banana<br />
<input type="radio" name="fruit" οnclick="check(this.value)" value="梨">pear<br />
</form>

</body>
</html>

 

 

2.复选框

<html>
<head>
<script type="text/javascript">
function createOrder()
{
food=document.forms[0].food
txt=""
for (i=0;i<food.length;++ i)
{
if (food[i].checked)
{
txt=txt + food[i].value + " "
}
}
alert("您订购的早点有： " + txt)
}
</script>
</head>

<body>
<p>你需要什么样的早点？</p>
<form>
<input type="checkbox" name="food" value="油条">油条<br />
<input type="checkbox" name="food" value="豆浆">豆浆<br />
<input type="checkbox" name="food" value="鸡蛋">鸡蛋<br />
<br />
<input type="button" οnclick="createOrder()" value="发送订单">
<br />
</form>
</body>

</html>

 

 

3.下拉框

<html>
<head>
<script type="text/javascript">

function changeFruit()
{
 var myselect=document.getElementById("mySelect")
 alert(myselect.options[myselect.selectedIndex].text)
 if(myselect.options[myselect.selectedIndex].text == "桃子")
    {
         myselect.disabled = true;
    }
}

function enable()
  {
   document.getElementById("mySelect").disabled=false      
  }

</script>
</head>
<body>

<form>
<select id="mySelect" οnchange="changeFruit()">
  <option></option>
  <option>苹果</option>
  <option>桃子</option>
  <option>香蕉</option>
  <option>桔子</option>
</select>
<br />
<input type="button" οnclick="enable()" value="启用列表">
</form>

</body>
</html>

 

xing23777
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
单选框、复选框、下拉框的使用及跨页面传值
08-07
这个里面有安卓的单选框，复选框，以及下拉框的使用，以及点击按钮会显示你输入的信息，适合新手的借鉴与使用。
Jquery 获取选中单选框（复选框，下拉框）的值
tianlang2011的专栏
03-01 368
JQuery 1.8.2 以前获取的方式获得不到了，这种可以 $('select.foo option:selected').val(); // 获取class 为foo的下拉框的值 $('select.foo').val(); //也可以这样 获取class 为foo的下拉框的值 $('input:checkbox:checked').val(); //获取checkbox的值 $(...
jQuery获取Select option 选择的Text和Value
热门推荐
heardy的专栏
12-17 6万+
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关设置   获取一组radio被选中项的值:var item = $('input[name=items][checked]').val(); 获取select被选中项的文本:var item = $("select[@name=items] option[@s
单选框、复选框的值获取与设置
weixin_30443075的博客
03-01 253
1.　　样式：<div>　　　　　　<h4>是否关联模型：　　　　　　　　<input type="checkbox" name="tvod" class="" value="1">关联　　　　　　</h4>　　　　</div> 　　 取值：var value...
jQuery对单选、复选、下拉框的取值和赋值
墨 尘
03-12 1310
1、单选框 //单选框选中 $("#sex1").prop("checked","checked"); // 根据id $("input[type=radio][name=sex][value="+data.sex+"]").prop("checked",'checked'); //根据value // 单选框取值 var sex = $('input:radio[name="sex"]:c...
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
12-31
本文主要介绍PyQt5界面最基本使用的单选按钮、复选框、下拉框三种控件的使用方法进行介绍。 1、RadioButton单选按钮/CheckBox复选框。需要知道如何判断单选按钮是否被选中。 2、ComboBox下拉框。需要知道如何对...
jquery 复选框组件
10-11
jQuery UI提供了一套完整的UI元素样式，包括自定义的复选框和单选按钮。 #### jQuery UI Multiselect 插件 jQuery UI Multiselect是jQuery UI的一个扩展，它将传统的多选框转变为可配置的下拉列表，提升了用户体验...
jQuery 取值、赋值的基本方法整理
12-01
除了基本的取值和赋值，jQuery还提供了其他操作，如检查单选按钮或复选框是否被选中，或者改变选中状态。例如，`$("#chk_id").attr("checked", "checked")`可以勾选复选框，`$("#chk_id").attr("checked", "");`则...
jQuery对html元素取值与赋值的方法
10-26
本文将详细讲解jQuery如何对HTML元素进行取值与赋值，特别关注文本框（TEXTBOX）、标签（LABLE）、单选按钮（Radio）、复选框（Checkbox）以及下拉列表（Select）。 1. **文本框（TEXTBOX）** - 取值：使用`.val()...
jQuery对表单元素的取值和赋值操作代码
12-01
4. **复选框（Checkbox）的取值**： - 获取复选框的值：`var checkboxval = $("#checkbox_id").attr("value")`。 5. **下拉列表（Select）的取值**： - 获取下拉列表的值：`var selectval = $('#select_id').val...
下拉框和单选框复选框的选中的值
weixin_30640291的博客
03-05 218
1.下拉框的选中值 <select id="select"> 　　<option value="1">1</option> 　　<option value="2">2</option> </select> 第一种：$("select option:checked").val(); 第二种：$("#select")....
设置选中最大值，选中数达最大值时，其他选项置灰
我的博客
11-23 291
需求描述：循环数组得到选项的div块，选中的爱好达到3个时，其他选项置灰，不能选择；点击取消3个中的一个选项，可以继续选择选项 图片描述： 循环得到选项 点击选中的样式 选中数量达到最大值 代码设计： <template> <div> <div class="interest-home flex"> <p ...
HTML表单元素下拉列表及单选复选框选中和获取值
一梦三四年～
12-16 1065
//根据值选中下拉菜单某项 function setSelectedValue(id,value){ var selectObj = document.getElementById(id); for(i=0;i&lt;selectObj.length;i++){ if(selectObj.options[i].value==value){ selectObj...
怎样使用combobox的显示值和实际值
fengyeng的专栏
05-22 4456
直接将combobox的datasource设置为datatabl如 ComboBox3.DataSource = datatable1 ComboBox3.DisplayMember = "字段名1" ComboBox3.ValueMember = "字段名2"在update时，ComboBox3.SelectedValue 值就
select下拉框多选取值
Mw_blooming的博客
12-13 1817
本来是单选取值，现改为多选   其中&lt;select&gt; 标签新增multiple属性，如&lt;select id = "sel"  multiple = "multiple"&gt; 取值： 单选时 var award =  $("#sel").val() 这取的时候option中value属性的值 多选时 var award =  $("#sel").val().toS
单选框、复选框、下拉框
weixin_30709809的博客
06-12 310
单选框直接定位到元素，做点击操作就可以了 单选框样式 测试网页的html: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <form ...
selenium五 单选框、复选框、下拉框元素选择
雪国的花儿’s Blog
10-10 4501
单选框 源码 &lt;input type="radio" name="subject[0]" required="" value="F1" aria-required="true"&gt; &lt;input type="radio" name="subject[0]" required="" val
使用JS控制单选框复选框和下拉框的回显
最新发布
05-25
单选框和复选框的回显可以使用 JavaScript 的 DOM 操作来实现。假设我们有以下 HTML 代码： ```html <label for="option1">选项1</label> <input type="radio" id="option1" name="options" value="1"> <label for="option2">选项2</label> <input type="radio" id="option2" name="options" value="2"> <label for="option3">选项3</label> <input type="checkbox" id="option3" name="options" value="3"> <label for="option4">选项4</label> <input type="checkbox" id="option4" name="options" value="4"> ``` 我们可以通过以下 JavaScript 代码来实现单选框和复选框的回显： ```javascript // 获取单选框和复选框元素 var option1 = document.getElementById("option1"); var option2 = document.getElementById("option2"); var option3 = document.getElementById("option3"); var option4 = document.getElementById("option4"); // 设置单选框和复选框的默认选中状态 option1.checked = true; option3.checked = true; // 监听单选框和复选框的变化，更新选中状态 option1.addEventListener("change", function() { option2.checked = false; }); option2.addEventListener("change", function() { option1.checked = false; }); option3.addEventListener("change", function() { option4.checked = false; }); option4.addEventListener("change", function() { option3.checked = false; }); ``` 这段代码首先获取了四个单选框和复选框的元素，并设置了选项1和选项3为默认选中状态。然后通过监听单选框和复选框的变化，更新其他选项的选中状态。 下拉框的回显也可以使用 JavaScript 的 DOM 操作来实现。假设我们有以下 HTML 代码： ```html <select id="fruit"> <option value="apple">苹果</option> <option value="banana">香蕉</option> <option value="orange">橙子</option> </select> ``` 我们可以通过以下 JavaScript 代码来实现下拉框的回显： ```javascript // 获取下拉框元素 var fruit = document.getElementById("fruit"); // 设置下拉框的默认选中状态 fruit.value = "banana"; // 监听下拉框的变化，更新选中状态 fruit.addEventListener("change", function() { if (fruit.value === "apple") { // do something } else if (fruit.value === "banana") { // do something } else if (fruit.value === "orange") { // do something } }); ``` 这段代码首先获取了下拉框的元素，并设置了香蕉为默认选中状态。然后通过监听下拉框的变化，更新其他选项的选中状态。根据选中的值，可以执行不同的操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值