張小呆的碎碎唸

這段時間與 jQuery 共舞了一陣子，趁現在有空，整理了一下寫過的程式碼，順便將其寫成文章，讓自己在日後方便閱讀。

以下就用 ASP.NET MVC 來實作

步驟一：佈畫面
<p> <input type="radio" id="rdoSingle" name="rdoSingle" value="我是單一個 Radio Button" /><label for="rdoSingle">單一個 Radio Button</label> <br /> <input type="button" id="btnRdoSingle" value="顯示選取結果" /> </p> <p> <input type="checkbox" id="chkSingle" name="chkSingle" value="我是單一個 Checkbox" /><label for="chkSingle">單一個 Checkbox</label> <br /> <input type="button" id="btnChkSingle" value="顯示選取結果" /> </p> <p> <input type="radio" id="Radio1" name="rdoMulti" value="Radio 1" /><label for="Radio1">Radio Button 1</label><br /> <input type="radio" id="Radio2" name="rdoMulti" value="Radio 2" /><label for="Radio2">Radio Button 2</label><br /> <input type="radio" id="Radio3" name="rdoMulti" value="Radio 3" /><label for="Radio3">Radio Button 3</label><br /> <input type="radio" id="Radio4" name="rdoMulti" value="Radio 4" /><label for="Radio4">Radio Button 4</label> <br /> <input type="button" id="btnRdoMulti" value="顯示選取結果" /> </p> <p> <input type="checkbox" id="Checkbox1" name="chkMulti" value="Checkbox 1" /><label for="Checkbox1">Checkbox 1</label><br /> <input type="checkbox" id="Checkbox2" name="chkMulti" value="Checkbox 2" /><label for="Checkbox2">Checkbox 2</label><br /> <input type="checkbox" id="Checkbox3" name="chkMulti" value="Checkbox 3" /><label for="Checkbox3">Checkbox 3</label><br /> <input type="checkbox" id="Checkbox4" name="chkMulti" value="Checkbox 4" /><label for="Checkbox4">Checkbox 4</label> <br /> <input type="button" id="btnChkMulti" value="顯示選取結果" /> <input type="button" id="btnChkMultiValue" value="顯示結果 CheckList 值" /> </p> <p> <select id="selectSingle" name="selectSingle"> <option value="Item1">Item 1</option> <option value="Item2">Item 2</option> <option value="Item3">Item 3</option> <option value="Item4">Item 4</option> <option value="Item5">Item 5</option> </select> <br /> <input type="button" id="btnSelectSingle" value="顯示選取結果" /> <input type="button" id="btnSingleSelectOption" value="顯示 Select 中的 option 資訊" /> <input type="button" id="btnViewSingleSelectOptionHtml" value="顯示 Select 下的 option" /> </p> <p> <select id="selectMulti" name="selectMulti" multiple="multiple"> <option value="Item1">Item 1</option> <option value="Item2">Item 2</option> <option value="Item3">Item 3</option> <option value="Item4">Item 4</option> <option value="Item5">Item 5</option> </select> <br /> <input type="button" id="btnSelectMulti" value="顯示選取結果" /> </p>

結果：


步驟二：加入 jQuery
<script type="text/javascript"> var showMessage; $('#btnRdoSingle').click(function() { alert("選取時才會顯示值：" + $('input[name=rdoSingle]:radio:checked').val() + "\n" + "有沒有選到都會顯示值：" + $('input[name=rdoSingle]:radio').val()); }); $('#btnChkSingle').click(function() { alert("選取時才會顯示值：" + $('input[name=chkSingle]:checked').val()); }); $('#btnRdoMulti').click(function() { showMessage = "選取時顯示值：" + $('input[name=rdoMulti]:radio:checked').val() + "\nRadio List的值："; $('input[name=rdoMulti]:radio').each(function() { showMessage += "\n" + $(this).val(); }); alert(showMessage); }); $('#btnChkMulti').click(function() { showMessage = "所選取的值有："; $('input[name=chkMulti]:checked').each(function() { showMessage += "\n" + $(this).val(); }); alert(showMessage); }); $('#btnChkMultiValue').click(function() { showMessage = "CheckList 所有值："; $('input[name=chkMulti]').each(function() { showMessage += "\n" + $(this).val(); }); alert(showMessage); }); $('#btnSelectSingle').click(function() { showMessage = "所選取的項目：\nItem：" + $('#selectSingle option:selected').text() + "\tValue：" + $('#selectSingle option:selected').val(); alert(showMessage); }); $('#btnSingleSelectOption').click(function() { showMessage = "Select 中的 option 項目："; $('#selectSingle option').each(function() { showMessage += "\nItem：" + $(this).text() + "\tValue：" + $(this).val(); }); alert(showMessage); }); $('#btnViewSingleSelectOptionHtml').click(function() { alert(" Select 下的 option：\n" + $('#selectSingle').html()); }); $('#btnSelectMulti').click(function() { showMessage = "所選取的項目："; $('#selectMulti option:selected').each(function() { showMessage += "\nItem：" + $(this).text() + "\tValue：" + $(this).val(); }); alert(showMessage); }); </script>

結果：請有興趣的看倌，自行點擊 Button 觀看結果，Button 太多了，光截圖就累了...

以上就是小弟這陣子的心得，分享給大家...