您可以在紙質表格中看到需要轉換爲網頁表單的內容。我希望它顯示覆選框並禁用輸入字段,除非用戶選中它旁邊的框。我已經看到了使用一個或兩個元素來完成此操作的方法,但我想用大約20-30個檢查/輸入對來完成此操作,並且不希望多次重複相同的代碼。我只是沒有足夠的經驗來自己解決這個問題。任何人都知道解釋如何做到這一點?謝謝!在支票上顯示輸入框
P.S.最終,這些數據將全部通過電子郵件發送給PHP。
您可以在紙質表格中看到需要轉換爲網頁表單的內容。我希望它顯示覆選框並禁用輸入字段,除非用戶選中它旁邊的框。我已經看到了使用一個或兩個元素來完成此操作的方法,但我想用大約20-30個檢查/輸入對來完成此操作,並且不希望多次重複相同的代碼。我只是沒有足夠的經驗來自己解決這個問題。任何人都知道解釋如何做到這一點?謝謝!在支票上顯示輸入框
P.S.最終,這些數據將全部通過電子郵件發送給PHP。
:
//this will be the structure of each checkbox and input element.
<input type="checkbox" value="Public Relations" name="skills" /><input type="text" class="hidden"/> Public Relations <br/>
在你的CSS:
.hidden{
display:none;
}
.shown{
display:block;
}
在你的jQuery:
$('input[type=checkbox]').on('click', function() {
// our variable is defined as, "this.checked" - our value to test, first param "shown" returns if true, second param "hidden" returns if false
var inputDisplay = this.checked ? 'shown' : 'hidden';
//from here, we just need to find our next input in the DOM.
// it will always be the next element based on our HTML structure
//change the 'display' by using our inputDisplay variable as defined above
$(this).next('input').attr('class', inputDisplay);
});
有樂趣。
太棒了,謝謝!! ......幾個錯誤:在'attr'之前缺少''',在'inputDisplay'之後也不需要'} ...所以這行應該是'$(this).next('input' ).attr('class',inputDisplay);'...我沒有編輯權限:)管理員注意:它說我的編輯時間不夠長,但所有需要更改的是添加一個' .'並刪除'}'...不能幫助它需要的變化是如此之小...謝謝! – ansarob 2012-03-09 15:24:46
爲反映您確定的問題所做的修改 - 致歉。另外,如果您不想遇到編輯問題,請確保您編輯了BODY幷包含諸如** EDIT 1 **之類的內容,並且添加了缺少的\。\以及刪除了錯誤的\} \ - 我想避開我的編輯。 – Ohgodwhy 2012-03-09 21:47:45
我不認爲這是一個好主意。
想想用戶。首先他們必須點擊才能輸入一個值。所以他們總是需要將他們的手從鼠標變成鍵盤。這不是很實用。
爲什麼不只是給文本字段?用電子郵件發送時,您可以忽略空值。
這很有道理。紙質表格有缺陷 - 爲什麼要選中一個框來填寫數字?填寫的數字表示支票,空白值表示不支票。完成。如果您需要*將檢查值存儲在數據庫中或某些內容中,請在後端處理它。不要讓我檢查一個盒子,這樣我可以輸入一個數字。 – 2012-03-08 20:05:22
你知道,這是有道理的。我想我剛剛掛上了轉換紙張到底是怎麼回事。有時你只是在想事:) – ansarob 2012-03-08 20:07:05
更好的是單選按鈕。 – 2012-03-08 20:40:26
由於您的既定目標是減少輸入重複的代碼,真正的答案,這個線程,就是以一個IDE和禪宗編碼插件:
http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/
由於這ISN動態,爲什麼要使用JavaScript或jQuery?只需使用IDE構建表單即可。 – j08691 2012-03-08 19:58:18