`

jQuery操作<input type="radio">

阅读更多

[转:]http://www.cnblogs.com/luxh/archive/2012/06/07/2538281.html

<input type="radio">如下:

<input type="radio" name="city" value="BeiJing">北京
<input type="radio" name="city" value="TianJin">天津
<input type="radio" name="city" value="NanJing">南京
<input type="radio" name="city" value="YangZhou">扬州
<input type="radio" name="city" value="SuZhou">苏州

 1、获取选中的radio的值:

$("input[name='city']:checked").val();

   使用元素选择器,再使用属性过滤器name='city',最后使用:checked选取被选中的元素。

2、给指定值的radio设置选中状态:

$("input[name='city'][value='YangZhou']").attr("checked",true);

   给name="city"而且value="YangZhou"的radio设置选中状态。

3、取消name="city"的radio的选中状态:

$('input[name="city"]:checked').attr("checked",false);

 4、获取name="city"的radio的个数:

$("input[name='city']").length;

5、获取name="city"而且索引是偶数的radio:

$("input[name='city']:even");

  索引是从0开始的。

6、获取name="city"而且索引是奇数的radio:

$("input[name='city']:odd");

   索引是从0开始的。

7、迭代radio

$("input[name='city']").each(function(i,obj){
    //i,迭代的下标,从0开始
    //obj,当前的对象(HTMLInputElement),可以使用obj.value格式获取属性值
    //$(this);当前jQuery对象,可以使用$(this).val()获取属性值
});

  迭代name="city"的radio。

8、禁用radio:

$("input[name='city']").attr("disabled",true);

  禁用name="city"的radio。

9、启用radio:

 

$("input[name='city']").attr("disabled",false);

 启用name="city"的radio。

 

分享到:
评论

相关推荐

    jQuery操作input type=radio的实现代码

    在Web前端开发中,操作单选按钮(input type="radio")是经常遇到的需求。借助jQuery库可以非常方便地进行操作。以下知识点涵盖了使用jQuery操作单选按钮的各种方法及其应用场景。 知识点一:获取选中的单选按钮的...

    jQuery SVG实现Loading加载按钮动画图标特效.zip

    input type="radio" name="loaders" value="circular-loading" checked="checked"/&gt; &lt;span&gt;circular&lt;/span&gt; &lt;/label&gt; &lt;label&gt; &lt;input type="radio" name="loaders" value="circle-loading"/&gt; &lt;span&gt;...

    jQuery代码性能优化的10种方法

    1、总是使用#id去寻找element. 在jQuery中最快的选择器是ID选择器 ($(‘#someid’)). 这是因为它直接映射为JavaScript的...input type=radio class=on name=light value=red /&gt; Red&lt;/li&gt; &lt;li&gt;&lt;input

    JQuery选择器

    &lt;input type="radio" name="a"/&gt;1&lt;input type="radio" name="a"/&gt;2&lt;br/&gt; &lt;input type="reset" /&gt;&lt;br/&gt; &lt;input type="submit" value="提交"/&gt;&lt;br/&gt; &lt;input type="text" /&gt;&lt;br/&gt; &lt;select&gt;&lt;option&gt;Option&lt;/option&gt;...

    jquery获取input表单值的代码

    jquery取radio单选按钮的值$(“input[name=’items’]:checked”).val();jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $(...

    一个简单的网页设计

    &lt;label&gt;&lt;input type="radio" name="sex" value="男" checked="checked" /&gt;男&lt;/label&gt; &lt;label&gt;&lt;input type="radio" name="sex" value="女" /&gt;女&lt;/label&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class=...

    jQuery完全实例.rar

    创建一个 &lt;input&gt; 元素必须同时设定 type 属性。因为微软规定 &lt;input&gt; 元素的 type 只能写一次。 jQuery 代码: // 在 IE 中无效: $("&lt;input&gt;").attr("type", "checkbox"); // 在 IE 中有效: $("&lt;input type='...

    jQuery自定义单选按钮复选框样式特效.zip

    &lt;i class='input_style radio_bg'&gt;&lt;input type="radio" name="hot" value="1"&gt;&lt;/i&gt; a1 &lt;/lable&gt; &lt;lable&gt; &lt;i class='input_style radio_bg'&gt;&lt;input type="radio" name="hot" value="2"&gt;&lt;/i&gt; ...

    表单的基本使用1

    - **单选按钮**(Radio buttons):`&lt;input type="radio"&gt;`,如`&lt;input type="radio" name="sex" value="男"/&gt;`,用户只能选择其中一个选项。通过`name`属性定义同一组的单选按钮,`value`定义其值。 - **复选框**...

    移动全屏代码

    &lt;input name="radio" type="radio" class="mui-radio"&gt;Item 5 &lt;/li&gt; &lt;li class="mui-table-view-cell mui-radio mui-left"&gt; &lt;input name="radio" type="radio"&gt;Item 6 &lt;/...

    单选和多选美化

    &lt;input type="radio" name="rdo" class="rdolist" checked="checked" /&gt; &lt;label class="rdobox"&gt; &lt;span class="check-image"&gt;&lt;/span&gt; &lt;span class="radiobox-content"&gt;男&lt;/span&gt; &lt;/label&gt; &lt;!--多选--&gt; &lt;input ...

    web前端基础入门知识

    2. **其他输入类型**:`&lt;input type="password"&gt;`密码框,`&lt;input type="checkbox"&gt;`复选框,`&lt;input type="radio"&gt;`单选按钮,`&lt;select&gt;`下拉菜单,`&lt;textarea&gt;`多行文本框。 3. **表单提交**:`&lt;form&gt;`标签定义...

    实用仿淘宝颜色尺寸选择特效

    &lt;p&gt;&lt;input type="radio" name="option" checked="checked" value="10" /&gt;&lt;/p&gt; &lt;p&gt;&lt;input type="radio" name="option" value="20" /&gt;&lt;/p&gt; &lt;p&gt;&lt;input type="radio" name="option" value="30" /&gt;&lt;/p&gt; &lt;input ...

    JavaWeb编程技术第2版源代码.docx

    3. `&lt;input type="radio"&gt;`:定义了单选按钮,用于选择性别。 4. `&lt;input type="checkbox"&gt;`:创建了复选框,允许用户选择多个兴趣爱好。 5. `&lt;select&gt;`和`&lt;option&gt;`:定义了一个下拉菜单,展示不同的学历选项。 6. ...

    html弹出窗体内涵单选,多选,分页

    &lt;input type="radio" id="option1" name="choice" value="1"&gt; &lt;label for="option1"&gt;选项1&lt;/label&gt; &lt;input type="radio" id="option2" name="choice" value="2"&gt; &lt;label for="option2"&gt;选项2&lt;/label&gt; ``` 3. *...

    jquery 单选按钮点击切换

    &lt;input type="radio" name="choice" id="option1" value="1"&gt; 选项一&lt;br&gt; &lt;input type="radio" name="choice" id="option2" value="2"&gt; 选项二&lt;br&gt; &lt;input type="radio" name="choice" id="option3" value="3"&gt; ...

    jQuery售后五星评价表单代码.zip

    &lt;input type="radio" name="rating" value="1" id="star1"&gt; &lt;label for="star1"&gt;1&lt;/label&gt; &lt;input type="radio" name="rating" value="2" id="star2"&gt; &lt;label for="star2"&gt;2&lt;/label&gt; &lt;input type="radio" name=...

    jQuery Mobile 表单

    2. **单选按钮**(`&lt;input type="radio"&gt;`)和**复选框**(`&lt;input type="checkbox"&gt;`):这些组件会被包装在`.ui-radio`或`.ui-checkbox`容器中,提供视觉反馈。 3. **下拉菜单**(`&lt;select&gt;`):在移动设备上,...

    jQuery单选框和复选框美化代码.zip

    &lt;input type="radio" name="choice" id="choice1" value="1"&gt; &lt;label for="choice1"&gt;选项1&lt;/label&gt; &lt;input type="radio" name="choice" id="choice2" value="2"&gt; &lt;label for="choice2"&gt;选项2&lt;/label&gt; &lt;select...

Global site tag (gtag.js) - Google Analytics