前提是要包含jquery文件。

相关代码:

jQuery(function($) {
init_price_checkbox("by_price");
init_price_checkbox("by_size");
});
function init_price_checkbox(id){
$("#"+id+" input[type='checkbox']").each(function(){
$(this).click(function(){
for (var i = $("#"+id+" input[type='checkbox']").length - 1; i >= 0; i--) {
if($(this).index("#"+id+" input[type='checkbox']")==i)
$(this).attr('checked','checked');
else
$("#"+id+" input[type='checkbox']").eq(i).removeAttr('checked');
}; });
});
}

html代码:

<div id="by_price">
<form id="search_by_price" method="post" action="index.php?action=search&orderby=price">
<span class="by_words">By Price</span>
<div class="p_left_columu">
<div><input type="checkbox" name="75" value="1" ><span>Under $75</span></div>
<div><input type="checkbox" name="75-100" value="2" ><span>$75 - $100</span></div>
<div><input type="checkbox" name="100-125" value="3" ><span>$100 - $125</span></div>
</div>
<div class="p_right_columu">
<div><input type="checkbox" name="125-150" value="1" ><span>$125 - $150</span></div>
<div><input type="checkbox" name="150" value="2" ><span>$150 & Above</span></div>
</div>
<div class="search_button"><input type="image" border="0" onmouseout="this.src='/themes/diy_html5/images/crystal_by_price/price_search.png'" onmouseover="this.src='/themes/diy_html5/images/crystal_by_price/price_search_on.png'" src="/themes/diy_html5/images/crystal_by_price/price_search.png">
</div>
</form>
</div>

用jquery将复选框改成单选框的更多相关文章

  1. PHP下拉框内容随单选框内容变化

    这久在修改一个项目的小东西,要求把下拉框改为单选框,由于代码封闭,修改不了获取函数,所以想了个办法让下拉框的内容随单选框的内容变化,下面把代码分享给大家: <!DOCTYPE html PUBL ...

  2. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  3. 对jquery操作复选框

    摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta chars ...

  4. jQuery取复选框值、下拉列表里面的属性值、取单选按钮的属性值、全选按钮、JSON存储、*去空格

    1.jquery取复选框的值<!--引入jquery包--> <script src="../jquery-1.11.2.min.js"></scri ...

  5. jquery判断复选框checkbox是否被选中

    jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');

  6. jquery判断复选框是否选中

    jquery判断复选框是否被选中 $(function(){ $(document).on("click", ".checkbox",function(){ v ...

  7. jQuery判断复选框checkbox的选中状态

    通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...

  8. jquery实现复选框全选,全不选,反选中的问题

    今天试了一下用jquery选择复选框,本来以为很简单的东西却有bug,于是搜索了一下找到了解决方法. html代码如下(这里没有用任何样式,就没有再放css了): <html> <h ...

  9. jquery操作复选框(checkbox)十二技巧

    jquery操作复选框(checkbox)的12个小技巧. 1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$( ...

随机推荐

  1. js在mootools框架下的new Class

    首先,在HTML文件中引入mootools.js. mootools-more.js.mootools-core.js,然后就能使用mootools封装的一些特性. 几乎类似于面向对象. mootoo ...

  2. [Hadoop入门] - 2 ubuntu安装与配置 hadoop安装与配置

    ubuntu安装(这里我就不一一捉图了,只引用一个网址, 相信大家能力) ubuntu安装参考教程:  http://jingyan.baidu.com/article/14bd256e0ca52eb ...

  3. 解决extjs grid 不随窗口大小自适应的问题

    解决extjs grid 不随窗口大小自适应的问题 August 30, 2010 zhai Javascript 8,403 viewsGo to comment 最近遇到的问题,在使用grid的时 ...

  4. 联系人的侧边字母索引ListView 将手机通讯录姓名通过首字母排序。

      package com.lixu.letterlistview; import java.util.ArrayList; import java.util.List; import org.apa ...

  5. bzoj 2428: [HAOI2006]均分数据

    #include<cstdio> #include<iostream> #include<cstdlib> #include<ctime> #inclu ...

  6. POJ 2828 单点更新(好题)

    Buy Tickets Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 15086   Accepted: 7530 Desc ...

  7. 最长公共上升子序列(LICS) 模板

    void LICS() { ;i<=n;i++) { ; ;j<=n;j++) { if (a[i]==b[j]) f[i][j]=ma+; ][j]; ][j]>ma) ma=f[ ...

  8. K2十年:专注BPM

    <聚·谋·变——K2中国用户大会> 导演:K2中国 主演:K2用户 时长:420分钟 票价:免费 上映日期:2015年7月17日 查看完整视频请关注K2官方微信账号

  9. hdu 1030 Delta-wave (C++, 0ms, explanatory comments.) 分类: hdoj 2015-06-15 12:21 45人阅读 评论(0) 收藏

    problem description http://acm.hdu.edu.cn/showproblem.php?pid=1030 #include <cstdio> #include ...

  10. CCNA 6.5

    no sh (no shutdown : start the interface)   router rspf 1 network x.x.x.x x.x.x.x area 0 int (interf ...