[jQ]jQuery Custom Check Box and Radio Buttons 1.0.6

沒錯!只要 500 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

jquery_custom_check_box_and_radio_buttons_1_0_4

只要是做網頁設計的人都會知道內建的 checkbox 及 radio 元素就是一個字 - "醜"，因此還是得透過 JavaScript 及 CSS 來做偽裝囉。什麼~不會寫程式！那就來試試看用 jQuery Custom Check Box and Radio Buttons 套件，只要替換圖片就能產生有特色的 checkbox 及 radio 哩。

套件名稱：jQuery Custom Check Box and Radio Buttonsb
套件版本：1.0.6
作者網站：http://mypocket-technologies.com/jquery/cust_radio_buttons/
套件網址：http://plugins.jquery.com/project/custom_radio_buttons
發佈日期：2009-09-27
檔案大小：5.88 KB
檔案下載：cust_checkbox_plugin.js style.css

參數說明：

檢視原始碼 JavaScript

disable_all(選填)
描述： 停用全部的選項
預設值： false
 
hover(選填)
描述： 是否加入 hover 時的狀態
預設值： true
 
wrapperclass(選填)
描述： checkbox 及 radio 的 wrapper 標籤；但...好像沒作用
預設值： "group"
 
callback(選填)
描述： 當點選後所觸發的事件
預設值： function(){}

方法說明：

檢視原始碼 JavaScript

1 2	// 幫指定的 checkbox 或 radio 轉換成圖片型態 $(selector).custCheckBox(options);

使用範例：

檢視原始碼 JavaScript

<script type="text/javascript" src="jquery.js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="cust_checkbox_plugin.js"></script>
<script type="text/javascript">
	$(function(){
		$(":checkbox").custCheckBox();
 
		// 加上 callback 事件
		$(":radio").custCheckBox({
			callback: function(){
				alert("您點選了:" + $(this).nextAll("input:first").val());
			}
		});
	});
</script>
 
<body>
	<div class="group">
		<label>Check One:</label> <input type="checkbox" value="1x" name="checkboxone" id="1x" checked="checked"/>
		<label>Check Two:</label> <input type="checkbox" value="2x" name="checkboxone" id="2x"/>
		<label>Check Three:</label> <input type="checkbox" value="3x" name="checkboxone" id="3x" checked="checked"/>
	</div>
 
	<div class="groupRadio">
		<label>Radio One:</label> <input type="radio" value="4x" name="radioone" id="4x"/>
		<label>Radio Two:</label> <input type="radio" value="5x" name="radioone" id="5x" checked="checked"/>
		<label>Radio Three:</label> <input type="radio" value="6x" name="radioone" id="6x"/>
	</div>
</body>

範例 1

檔案描述
基本的範例檔案(免空)	開始下載
基本的範例檔案	會員限定

checkbox 及 radiobox 的圖片：

也許您對這些文章也有興趣

// 最多可點選 var max = 2; $(":checkbox").custCheckBox({ callback: function(){ var _obj = $(this).nextAll("input:first"); if(max==0 && _obj.attr('checked')){ $(this).addClass("cust_checkbox_off"); _obj.attr('checked', ''); alert('已經到達可選擇的上限!!'); return; } _obj.attr('checked') ? max-- : max++; } }); // uncheck $(':button').click(function(){ $(':checkbox, :radio').attr('checked', '').custCheckBox(); });

19 筆針對 [jQ]jQuery Custom Check Box and Radio Buttons 1.0.6 的迴響

1 2 下一頁 »

嵐曦於 2009-11-05 11:42:07 說：

您好，想請問
怎麼在按下button後，讓checkbox的圖示變成off狀態
我把所有checked改成false，但圖示依然是on
範例:http://www.megaupload.com/?d=EFEFJ6D0

回覆 ↓
- 男丁格爾於 2009-11-05 13:17:12 說：
  打開 cust_checkbox_plugin.js 找第 45 行..加入 if 判斷..整行改成
  
  檢視原始碼 JavaScript
  1 2 3
  if($(thisElm).prev("span.cust_checkbox").length==0){ // 原第 45 行內容 }
  要讓已經加上 Checkbox 效果的 disabled 的話..只要再設定一次就好
  
  檢視原始碼 JavaScript
  1 2 3
  $(":checkbox").custCheckBox({ disable_all: true });
  回覆 ↓
吊人於 2009-11-20 22:20:53 說：

男丁格爾你好我是吊人
你所介紹的這個套件我拿來用後看不太懂
請問一下
套用這個套件後要用一個按鍵全選所有checkbox要怎麼改js檔?
如果有空的話可以幫我看一下嗎?

回覆 ↓
- 男丁格爾於 2009-11-23 14:28:22 說：
  在不改 js 的情況下可以這樣用
  
  檢視原始碼 JavaScript
  1
  $(":checkbox").attr("checked","checked").prev("span").removeClass("cust_checkbox_off").addClass("cust_checkbox_on");
  回覆 ↓
吊人於 2009-11-26 19:09:50 說：

不好意思我不太懂您的意思，
現在是要用這種方式建一個 Custom Check Box，
然後在function裡加上這段嗎？
可是後來也是不會動。

$(":checkbox").custCheckBox(
function(){
$(":checkbox").attr("checked","checked").prev("span").removeClass("cust_checkbox_off").addClass("cust_checkbox_on");
}

不然我用一般的方式，他都沒反應。

function check_all(obj,cName)
{
var checkboxs = document.getElementsByName(cName);
for(var i=0;i<checkboxs.length;i++){checkboxs[i].checked = obj.checked;}
}

還是您告訴我ㄧ些網站，
我去學相關的技術，
這是jquery嗎?

回覆 ↓
- 男丁格爾於 2009-11-26 20:44:03 說：
  
  那段 code 不是寫在 custCheckBox() 中啦
  你把它當成你的 check_all() 來使用就可以了..用它來替換你 check_all() 裡面的程式
  
  回覆 ↓
吊人於 2009-11-27 15:13:52 說：

原來這麼簡單......
我還跑去看他jquery怎麼寫的弄了一個多鐘頭

感謝提醒喔^^

回覆 ↓

你好.想問一下..
如果我是用checkbox..如果檢查選擇多於2個時就不給選

另外..我有幾個group..包括radio和check box..
如何新增一個按鈕去un check它們?

謝了

回覆 ↓

先謝謝 derek 熱心的幫忙回答..我再補充一下..
若 harry 你說的是使用此外掛的要的功能時..可參考下列語法：

範例網址：http://demonstration.abgne.tw/jquery/plugins/0047/0047.html

derek 於 2010-03-18 21:25:11 說：

to harry：
問題一：checkbox最多只可選擇2個
問題二：增加清空按鈕

1.將下方代碼加到script裡面

$(function(){
$("[name='checkboxone']").click(function(){
var cstr = "";
$("[name='checkboxone'][checked]").each(function(){
cstr+=$(this).val()+"\r\n";
});
cstr = cstr.split("\r\n");
if(cstr[2] != " && cstr[2] != undefined){
return false;
}
});

$("#clearf").click(function(){
$("#the_form :input").each(
function(){
switch($(this).attr('type')){
case 'radio':
$(this).attr("checked", false);
break;
case 'checkbox':
$(this).attr("checked", false);
break;
}
});
});
});

其中 checkboxone 是你的checkbox名稱(name)

2.放置清空按鈕　（請自行放置）
＜input type="button" name="clearf" id="clearf" value="清空"＞
請將＜與＞改為半形

回覆 ↓
derek 於 2010-03-18 22:19:31 說：

to harry：
再補充一個
#the_form
是你的form(表單)id名稱，請自行修改

回覆 ↓
飛於 2010-03-19 13:30:15 說：

標籤1
標籤2
標籤3
標籤4

標籤1的內容
標籤2的內容
標籤3的內容
標籤4的內容

大大之前照你這個方法是做出了頁籤沒錯~!!可是我想讓網頁中同時庸之前照你這個方法是做出了頁籤沒錯~!!可是我想讓網頁中同時傭有兩個樣籤~這樣要怎麼改阿!!

回覆 ↓
- 男丁格爾於 2010-03-22 16:00:24 說：
  
  你可以先參考看看這一篇：http://abgne.tw/jquery/apply-jquery/jquery-web-tabs.html
  
  回覆 ↓
derek 於 2010-03-22 16:01:41 說：

to 飛：
你是不是回錯地方0.0
頁籤可以放兩組以上，該頁面也有說明方法

回覆 ↓
Bumb 於 2011-06-27 17:34:22 說：

您好~
請問如果把放到的後面, 要如何能 attach the click event for each label 呢..? 謝謝!

回覆 ↓

男丁格爾's 脫殼玩

[jQ]jQuery Custom Check Box and Radio Buttons 1.0.6

也許您對這些文章也有興趣

19 筆針對 [jQ]jQuery Custom Check Box and Radio Buttons 1.0.6 的迴響

發表迴響取消回覆

也許您對這些文章也有興趣

19 筆針對 [jQ]jQuery Custom Check Box and Radio Buttons 1.0.6 的迴響

發表迴響 取消回覆

發表迴響取消回覆