使用jQuery重新設計表單？

我設置了這個腳本，可以將數據庫中的所有相關用戶回覆到旁邊帶有複選框的頁面。您可以通過選中某些框並提交表單，從數據庫中的這些用戶中創建一個組。這一切都很好。使用jQuery重新設計表單？

不幸的是，我們的設計師並不喜歡這樣。她想要的基本上是屏幕左側六個空白字段的列表。然後，當您單擊屏幕右側人物名稱旁邊的加號按鈕時，該名稱將出現在第一個空白字段中......以此類推，每個後續加號按鈕被點擊。

因此，不要重新編碼所有這些（它實際上不是一種選擇），我想我可以用jQuery對所有這些進行「重新設計」。我可以對複選框進行樣式設置，使其在未選中時顯示爲加號，在選中時顯示爲減號。

然後，我只需要進行某種事件，以便當單擊該複選框時，該人的姓名將被採集並插入到第一個空白框中。這只是煙霧和鏡子。空盒子可能只是一個邊框的div。在功能上，它將像以前一樣工作。

任何人都可以確認這是否可行？我的JS知識很爛，我不確定從哪裏開始。另外，我已經在頁面上下面的jQuery的驗證功能，我不希望這個新的JS用它來干擾：

$(document).ready(function(){ 
$("#myform").validate({ 
    debug: false, 
    rules: { 
     group: {required: true}, 
    }, 
    messages: { 
     group: {required: " Field required.", loginRegex: " Invalid character."}, 
    }, 
    submitHandler: function(form) { 
     $('input[type=submit]').attr('disabled', 'disabled'); 
     $('#results').html('Loading...'); 
     $.post('process_group.php', $("#myform").serialize(), function(data) { 
      $('#results').html(data); 
     }); 
    } 
    }); 
});

我想什麼，我要求的是如何編寫一個複選框意見當它被檢查時，將它的值插入到某個div中。並在未選中時刪除該值。

來源

2012-06-19 AzzyDude

有無數的插件修改複選框成風格的元素......讓谷歌是你的朋友 – charlietfl

這不是多數民衆贊成困擾我的一部分。 Google已經在這方面爲我提供了幫助。真正的問題是JS代碼在複選框被選中時將用戶名添加到字段中？ – AzzyDude

標記在哪裏？ – charlietfl

如果我理解正確的話，你需要使用jQuery做以下的事情：

1）更換您的複選框（），通過點擊+/-跡象服務器端代碼生成。

您可以通過查找複選框並將其默認階段替換爲具有+背景圖像的空鏈接來執行此操作。

$('checkbox').remove().html('<a href="#" style="background-image:plusSign.png">Some Name</a>');

相反的內嵌樣式的，你應該加號和減號背景圖片的CSS類，如果你知道怎麼辦。

2）希望將+改變爲 - 單擊時，和3）具有旁邊的+號，用戶的姓名出現在某處（在一個空的輸入框）

要切換？背景圖片，只需點擊時更改樣式（或者類，如果您知道如何將圖片設爲CSS類）。然後把這些內容放到你的目標元素中。

此的jsfiddle可能有助於解釋什麼，我上面描述：http://jsfiddle.net/Ap2yW/1/

來源

2012-06-19 17:32:54

是的，我打算使用CSS3。不過，我知道你不能用CSS單獨設計複選框或單選按鈕，你需要以某種方式使用jQeury。感謝所有的信息！ – AzzyDude

使用jQuery重新設計表單？

回答

相關問題