您的位置:首页 > Web前端 > JQuery

用jquery将复选框改成单选框

2014-02-12 08:45 134 查看
前提是要包含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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: