`
www-hello
  • 浏览: 100435 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

js checkbox 单选

阅读更多
<h3>5. 如果您在***网预订过酒店,预订过的是几星级的酒店?(可多选)
</h3>
<div id="item5">
<input name="hotelStar" id="hotelStar-1" value="1" type="checkbox">经济型  
<input name="hotelStar" id="hotelStar-2" value="2" type="checkbox">三星级  
<input name="hotelStar" id="hotelStar-3" value="3" type="checkbox">四星级       
<input name="hotelStar" id="hotelStar-4" value="4" type="checkbox">五星级  
<input name="hotelStar" id="hotelStar-5" value="5" type="checkbox">没有预订过酒店
<span id="hotelStar-error">  
</span></div>  
<h3>6. 如果您在***网预订过酒店,平均隔多久在本网站上预订一次?</h3>
<div id="item6">
<input name="bookInterval" id="bookInterval-1" value="1" type="radio">1周      
<input name="bookInterval" id="bookInterval-2" value="2" type="radio">1月       
<input name="bookInterval" id="bookInterval-3" value="3" type="radio">1季度      
<input name="bookInterval" id="bookInterval-4" value="4" type="radio">1年      
<input name="bookInterval" id="bookInterval-5" value="5" type="radio">&gt;1年      
<input name="bookInterval" id="bookInterval-6" value="6" type="radio">没有预订过酒店
<span id="bookInterval-error"> 
</span></div> 
。。。
<h3>12. 在本网站您主要为谁预订酒店?(可多选)</h3>
<div id="item12">
<input name="orderFor" id="orderFor-1" value="1" type="checkbox">自己旅游  
<input name="orderFor" id="orderFor-2" value="2" type="checkbox">自己出差  
<input name="orderFor" id="orderFor-3" value="3" type="checkbox">家人或朋友  
<input name="orderFor" id="orderFor-4" value="4" type="checkbox">同事  
<input name="orderFor" id="orderFor-5" value="5" type="checkbox">代为客户预订  
<input name="orderFor" id="orderFor-6" value="6" type="checkbox">没有预订过酒店
<span id="orderFor-error">  
</span></div>
 

 

选择一个页面上的多个元素(控件):

选择 item5 ,item12,item13 下的所有的 checkbox ,注册 click 事件

$("#item5 > input:checkbox,

#item12 > input:checkbox,

#item13 > input:checkbox").click(checkBoxClickHandler);

 

// 当选择预定的次数是 1 次,变 checkbox 为单选。

function checkBoxClickHandler(){

// 获取name = “bookTimes” 的元素中被选中的那个元素的value 的值

times = $('input[@name=bookTimes][@checked]').val();

  if(times == null || times != 2){

     return;

  }

// 取被点击的元素的父亲元素的id

  var parentId = $(this).parent().attr("id");

// 取父亲元素下的所有的checkbox

  checkboxs = $("#" + parentId + " > input:checkbox");

// 如果被单击的checkbox 没有被选中

if($(this).attr("checked") == false){

// 所有的checkbox 可选

  checkboxs.removeAttr('disabled');

  return;

  }

// 除了被选中之外的所有checkbox 不可用,disabled

  checkboxs.attr('disabled',true);

  $(this).removeAttr('disabled');

}

 

 

0
1
分享到:
评论

相关推荐

    js实现checkbox单选

    在ie\ff下测试过,都可以使用.实现单选,也可以取消选择

    checkbox单选复选按钮美化代码.zip

    "Checkbox单选复选按钮美化代码.zip" 提供了一种使用CSS3技术来提升这些元素视觉吸引力的方法。下面我们将详细探讨这一主题。 CSS3是层叠样式表的最新版本,它引入了许多新特性,如选择器、边框和背景图像、过渡、...

    checkboxlist单选功能

    为了实现`CheckboxList`的单选功能,可以通过JavaScript来控制复选框的状态。下面是一段示例代码: ```javascript function CheckSelect() { var tb = document.getElementById("chklistroomtype"); for (var i =...

    layui table中的列为checkbox 使layui中table表格中的列单元格显示为单选框checkbox

    在本文中,我们将深入探讨如何在layui框架中创建一个表格,其中某一列显示为复选框(checkbox),以便实现单选功能。layui是一款基于前端的轻量级组件库,提供了丰富的UI组件,包括表格(table)、按钮、表单元素等...

    CheckBoxList实现单选 C#(WEB)

    然而,有时候我们需要将CheckBoxList的功能限制为只能单选,就像单选按钮(RadioButtonList)那样。本篇将详细介绍如何在C#环境下,针对ASP.NET Web Forms应用,实现CheckBoxList控件的单选效果。 首先,我们需要...

    JS实现checkbox互斥(单选)功能示例

    在HTML中,单选按钮通常使用`&lt;input type="radio"&gt;`标签来实现,但在某些特定的场景下,如果要使用`&lt;input type="checkbox"&gt;`来实现类似的效果,就需要借助JavaScript来控制。本文将介绍如何使用JavaScript实现复选...

    css3制作checkbox单选按钮美化代码.zip

    本压缩包“css3制作checkbox单选按钮美化代码”聚焦于如何利用CSS3技术对传统的HTML复选框(checkbox)和单选按钮(radio button)进行美化,提升用户体验。 复选框与单选按钮是网页交互中常见的元素,它们通常用于...

    gridview编辑删除,checkbox单选全选

    在本主题中,“gridview编辑删除,checkbox单选全选”指的是如何在GridView控件中实现行数据的编辑、删除功能,以及在每一行中添加复选框(Checkbox)进行单选或全选操作。以下将详细讲解这些知识点。 1. GridView...

    javascript checkbox radiobutton 的全选单选

    JavaScript 关于checkBox 全选 单选 RadioButton 全选 单选 制定用户选中页面控件;等......

    html 复选框实现单选功能

    用checkbox实现的单选功能,很简单的js代码。

    checkbox单选多选

    Checkbox,通常称为复选框,允许用户在多个选项中进行选择,可以同时选择一个或多个选项,这与单选按钮(Radio Button)不同,单选按钮在同一时间只能选择一个选项。在本主题中,我们将深入探讨Checkbox的单选和多选...

    .net 后台实现 checkboxlist 单选

    综上所述,实现.NET后台CheckboxList的单选功能主要涉及到前端JavaScript的控制和后台C#的验证。通过结合这两部分,我们可以确保用户只能在CheckboxList中选择一个选项,并在用户尝试多选时提供适当的反馈。

    纯css3制作checkbox单选按钮美化样式特效源码.zip

    描述与标题相同,"纯css3制作checkbox单选按钮美化样式特效源码.zip",进一步确认了这个压缩包的内容——它是一个关于如何使用CSS3来改进和增强HTML checkbox元素视觉效果的实例代码。这可能是为前端开发者提供的一...

    js实现checkbox的radio单选效果,且可取消选择

    js实现checkbox的radio单选效果,且可取消选择

    jquery.checkbox 单选框多选框美化插件.zip

    jQuery作为一款强大的JavaScript库,提供了丰富的插件来美化这些元素,"jquery.checkbox"就是其中的一款,专为单选框和多选框提供美化功能。 该插件主要由以下部分组成: 1. **index.html**:这是示例页面,包含了...

Global site tag (gtag.js) - Google Analytics