如何使用select選項來控制checkbox- 藍色小舖 BlueShop

台灣最大程式設計社群網站

∣免費加入會員∣登入 ∣回首頁∣ 您好

線上人數
933

會員總數：246713
討論主題：190131

登入

登出

歡迎您免費加入會員

討論區選單

開發工具

行動裝置開發

資料庫

多媒體 / 網管

綜合

文章區

討論區列表 >> Java Script/ Node.js >> 如何使用select選項來控制checkbox

[]

[我要回覆]

如何使用select選項來控制checkbox
價值 : 50 QP 點閱數:1354 回應數:4

樓主

小龍

4	13
512	19

發送站內信

請問大大一下：
點選select後，checkbox的核取方塊會依select的選擇做不同判斷?
例如：
選"123456"，則第1及第3方塊會打勾
選"123456abcdef"，則第1、2丶都會打勾。

搜尋相關Tags的文章： [ select ] , [ checkbox ] ,
本篇文章發表於2012-12-19 18:19

1樓最有價值解答小高	在下只想到這個配合 jquery 的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> </head> <body> <select name="Sel"> <option value="123456">123456</option> <option value="abcdef">abcdef</option> <option value="123456abcdef">123456abcdef</option> </select> <input type="checkbox" id="chec_1" name="mark">找到123　 <input type="checkbox" id="chec_2" name="mark">找到456　 <input type="checkbox" id="chec_3" name="mark">找到123及456 </select> <script type="text/javascript"><!-- $('select[name=\'Sel\']').bind('change', function() { var getVal = this.value; if (getVal == '123456abcdef') { $('#chec_1').attr('checked', true); $('#chec_2').attr('checked', false); $('#chec_3').attr('checked', true); } else if (getVal == 'abcdef') { $('#chec_1').attr('checked', false); $('#chec_2').attr('checked', true); $('#chec_3').attr('checked', false); } else if (getVal == '123456') { $('#chec_1').attr('checked', true); $('#chec_2').attr('checked', false); $('#chec_3').attr('checked', false); } else { $('#chec_1').attr('checked', false); $('#chec_2').attr('checked', false); $('#chec_3').attr('checked', false); } }); $('select[name=\'Sel\']').trigger('change'); //--></script> </body> </html> 本篇文章回覆於2012-12-20 10:16 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
2樓作者回應小龍	謝謝小高大大的程式，但小弟愚笨，沒有使用過 jquery 的程式，是不是要安裝什麼軟體才可以讓程式可以動作? 另外再請教大大： 1.同一個檔案底下可以讓Javascript及jquery並存嗎? 2.小弟的select選項是從資料庫產生的，所以只要該選項中含有"123"或"abc"，即可讓checkbox對應勾選，小弟寫不出來，請大大再幫忙一下 3.可否儘量用Javascript(小弟jquery不會修改@_@)，感恩。本篇文章回覆於2012-12-20 12:43 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
3樓回應小高	jquery 的JS，直接用或是要開它的http頁面COPY另存都可以 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 1.同一個檔案底下可以讓Javascript及jquery並存嗎? 　　當然可以 2.select選項是從資料庫產生，沒差別吧　　var getVal = this.value，宣告　getVal 為取得select選項的值，　　if (getVal == '123')只是去判斷取得值而已 3.Javascrip與jquery 語法差別　　$('#chec_1').attr('checked', true);這是jquery 語法 document.getElementById("chec_1").checked == true;這是Javascrip語法本篇文章回覆於2012-12-21 01:55 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
4樓作者回應小龍	謝謝大大的解答，jquery已經可以正確的執行了，不過要修改時，真是一個頭2個大，看來小弟要來好好的研究了… 本篇文章回覆於2012-12-21 08:17 == 簽名檔 == --未登入的會員無法查看對方簽名檔--

回覆

如要回應,請先登入.

1樓最有價值解答小高	在下只想到這個配合 jquery 的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> </head> <body> <select name="Sel"> <option value="123456">123456</option> <option value="abcdef">abcdef</option> <option value="123456abcdef">123456abcdef</option> </select> <input type="checkbox" id="chec_1" name="mark">找到123　 <input type="checkbox" id="chec_2" name="mark">找到456　 <input type="checkbox" id="chec_3" name="mark">找到123及456 </select> <script type="text/javascript"><!-- $('select[name=\'Sel\']').bind('change', function() { var getVal = this.value; if (getVal == '123456abcdef') { $('#chec_1').attr('checked', true); $('#chec_2').attr('checked', false); $('#chec_3').attr('checked', true); } else if (getVal == 'abcdef') { $('#chec_1').attr('checked', false); $('#chec_2').attr('checked', true); $('#chec_3').attr('checked', false); } else if (getVal == '123456') { $('#chec_1').attr('checked', true); $('#chec_2').attr('checked', false); $('#chec_3').attr('checked', false); } else { $('#chec_1').attr('checked', false); $('#chec_2').attr('checked', false); $('#chec_3').attr('checked', false); } }); $('select[name=\'Sel\']').trigger('change'); //--></script> </body> </html> 本篇文章回覆於2012-12-20 10:16 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
2樓作者回應小龍	謝謝小高大大的程式，但小弟愚笨，沒有使用過 jquery 的程式，是不是要安裝什麼軟體才可以讓程式可以動作? 另外再請教大大： 1.同一個檔案底下可以讓Javascript及jquery並存嗎? 2.小弟的select選項是從資料庫產生的，所以只要該選項中含有"123"或"abc"，即可讓checkbox對應勾選，小弟寫不出來，請大大再幫忙一下 3.可否儘量用Javascript(小弟jquery不會修改@_@)，感恩。本篇文章回覆於2012-12-20 12:43 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
3樓回應小高	jquery 的JS，直接用或是要開它的http頁面COPY另存都可以 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 1.同一個檔案底下可以讓Javascript及jquery並存嗎? 　　當然可以 2.select選項是從資料庫產生，沒差別吧　　var getVal = this.value，宣告　getVal 為取得select選項的值，　　if (getVal == '123')只是去判斷取得值而已 3.Javascrip與jquery 語法差別　　$('#chec_1').attr('checked', true);這是jquery 語法 document.getElementById("chec_1").checked == true;這是Javascrip語法本篇文章回覆於2012-12-21 01:55 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
4樓作者回應小龍	謝謝大大的解答，jquery已經可以正確的執行了，不過要修改時，真是一個頭2個大，看來小弟要來好好的研究了… 本篇文章回覆於2012-12-21 08:17 == 簽名檔 == --未登入的會員無法查看對方簽名檔--