`
zpball
  • 浏览: 916692 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

用javascript判断radio/checkbox是否被选中

阅读更多
1.用javascript判断radio单选框是否被选中,我们以选择性别为例:

<span>性别:</span><span>男</span><input type="radio" value="1" name="sex" id="sex" /> 
<span>女</span><input type="radio" value="2" name="sex" id="sex" /> 
 

<script type="text/javascript"> 
var sex_obj = document.getElementsByName('sex'); 
var temp_sex = false; 
for(var i = 0; i < sex_obj.length; i ++){ 
if(sex_obj[i].checked){ 
var sex = sex_obj[i].value; 
temp_sex = true; 
break; 
} 
} 
if(temp_sex == false){ 
alert('请选择性别'); 
return false; 
} 
</script> 


2.JS(javascript)判断checkbox(复选框)是否被选中
<script type="text/javascript">
function checkform() {

     //判断标题栏是否填写
     if (document.form1.title.value == "") {
         alert("信息类型不能为空!");
         document.form1.title.focus();
         return;
     }

     //判断checkbox是否被选中
     var len = document.form1.keywords.length; 
     var checked = false; 

     for (i = 0; i < len; i++) 
     { 
         if (document.form1.keywords[i].checked == true) 
         { 
             checked = true; 
             break; 
         } 
     } 
     if (!checked) 
     { 
         alert("请至少选择一个关键词!"); 
         return; 
     }

     document.form1.submit();
}
</script> 


3.使用javascript获取select下拉列表框当中的文本值(对IE及firefox都适用)
<select onchange="isSelected(this.value);" id="city">          
 <option value="1">北京</option>          
 <option value="2" >上海</option>         
 <option value="2" >广州</option> 
</select> 

  也就是说当用户选择“上海”这一列时,需要将“上海”这个名称保存起来。
其实方法很简单。看下面javascript代码:
function isSelected(value) {
var cityName;
    var city = document.getElementById("city");
       //获取选中的城市名称
       for(i=0;i<city.length;i++){
           if(city[i].selected==true){
            cityName = city[i].innerText;  //关键点
            alert("cityName:" + cityName);
           }
       }
}
分享到:
评论

相关推荐

    Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)

    一、改变radio/checkbox选中状态 在HTML中,`&lt;input type="radio"&gt;` 和 `&lt;input type="checkbox"&gt;` 分别用于创建单选按钮和复选框。在jQuery中,我们可以通过`.attr()`方法来改变它们的`checked`属性,从而改变其...

    jquery操作Radio、Checkbox、Select Demo

    1. **设置Checkbox选中状态**: ```javascript $('input[type="checkbox"]').prop('checked', true); // 选中所有Checkbox $('#checkbox1').prop('checked', true); // 选中ID为'checkbox1'的Checkbox ``` 2. *...

    自定义radio&checkbox;样式

    3. **使用`:checked`伪类**:通过`:checked`伪类,当Radio或Checkbox被选中时,可以改变关联元素的样式。 ```css input[type="radio"]:checked + label { /* 添加选中时的样式 */ } ``` 4. **利用伪元素`:...

    jquery 获得select、radio、checkbox选择的text和value值

    // 获取名为 checkbox_id 的 checkbox 是否被选中 $("#checkbox_id").attr("checked"); // 设置名为 checkbox_id 的 checkbox 为选中状态 $("#checkbox_id").attr("checked", true); // 设置名为 checkbox_id 的 ...

    10组美化的radio&checkbox

    这些美化的radio和checkbox不仅在视觉上打破了传统的单一形态,还可能在交互反馈上有所创新,例如,选中时的动画效果、颜色变化或者形状变换,以明确告知用户操作状态。 在使用这些美化组件时,开发者需要注意兼容...

    jQuery美化radio和checkbox

    当radio或checkbox被选中时,通过jQuery监听事件并更新自定义UI的状态。 ```css input[type="radio"], input[type="checkbox"] { display: none; } input[type="radio"] + label:before { content: " "; ...

    JQuery 自定义 radio与checkbox

    本话题主要关注如何使用jQuery来实现自定义的radio(单选按钮)和checkbox(复选框)的美化。在现代Web界面设计中,为了提供更美观、用户体验更好的表单元素,开发者经常需要对这些标准HTML元素进行定制。 首先,...

    使用jQuery获取radio/checkbox组的值的代码收集

    正确的做法是使用冒号选择器(:checked),它能够确保我们只获取被选中的checkbox或radio的集合: ```javascript $("#btn5").click(function(){ var str = ""; $("[name='checkbox']:checked").each(function(){ ...

    CheckBox是否选中

    例如,在JavaScript中,`element.checked`属性会返回一个布尔值,表示复选框是否被选中。在Python的Tkinter库中,`var.get()`可以获取Checkbutton的当前状态。 三、事件处理 当CheckBox的状态改变时,我们常常需要...

    checkbox与radio好看的样式

    通常,这样的文件会包括通用样式、布局样式、组件样式等部分,其中针对 `checkbox` 和 `radio` 的样式可能会被单独封装在某个选择器内,以保持代码的模块化和易维护。 6. **HTML 结构与布局** "index.html" 文件是...

    JQuery操作checkbox、radio等示例

    2. **检查状态**:使用`.is()`方法可以检查元素是否被选中。例如,`$("#myCheckbox").is(":checked")`会返回一个布尔值,表示该checkbox是否被勾选。 3. **改变状态**:要改变checkbox或radio的选中状态,可以使用`...

    checkbox和radio 的使用 特效

    - **JavaScript操作**:同样可以使用JavaScript改变`radio`的状态,但需要注意互斥性,确保其他同组内的按钮相应地取消选中。 3. **特效实现** - **CSS样式**:通过CSS可以改变`checkbox`和`radio`的外观,例如...

    LazyForm radio,checkbox,select样式自定义

    在IT行业中,前端开发是至关重要的一环,而表单元素如radio、checkbox和select的样式定制则是提升用户体验和界面美观度的关键。"LazyForm radio,checkbox,select样式自定义"是一个针对这一需求的解决方案,它基于...

    jquery checkbox,radio是否选中的判断代码

    本文将详细介绍如何使用jQuery来判断`checkbox`和`radio`是否被选中。 首先,我们来看`radio`的选择判断。`radio`按钮通常用作一组互斥选项,用户只能选择其中一个。以下是一个简单的jQuery代码片段来判断某个具有...

    Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结

    下面将详细介绍如何使用jQuery来判断这些元素是否被选中以及如何获取它们的选中值。 1. **Radio Button(单选按钮)** - **获取选中值**: ```javascript var selectedRadioValue = $('input[name=items]:...

    jquery获取各种radio,checkbox,select的值等

    在JavaScript的世界里,jQuery库提供了一种简洁的方式来操作DOM元素,包括处理radio、checkbox和select。这些元素在网页表单中十分常见,用于收集用户输入。以下是对标题和描述中涉及的知识点的详细说明: 1. **...

    判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明

    因此,判断`RADIO`按钮是否被选择,主要看这一组中是否有被选中的按钮。在JavaScript中,可以通过遍历表单元素来检查这一组`RADIO`按钮的`checked`属性。如果找到一个`checked`属性为`true`的按钮,说明至少有一个被...

    漂亮的Checkbox Radio漂亮样式

    总的来说,“漂亮的Checkbox Radio漂亮样式”涵盖了如何使用HTML、CSS以及可能的JavaScript技术来定制和优化Checkbox与Radio的视觉效果,以提升网页的美感和用户体验。设计师和开发者可以通过各种技巧和工具创造出与...

Global site tag (gtag.js) - Google Analytics