Richie的學習地圖

 

jquery 取 html tab  ,checkbox、radio、select的幾種用法

jquery 使用版本為： jquery-3.3.1.js

html

        <div>
            <!--check-->
            <span>check</span>
            <br />
            <span>興趣</span>
            <input id="ua1" name="interest" type="checkbox" value="打藍球" />
            打藍球
            <input name="interest" type="checkbox" value="爬山" />
            爬山
            <input name="interest" type="checkbox" value="旅行" />
            旅行
            <input name="interest" type="checkbox" value="游泳" />
            游泳
            <input name="interest" type="checkbox" value="衝浪" />
            衝浪
            <input name="clickAll" id="clickAll" type="checkbox" />
            全選
            <br />
            <br />


            <!--raido-->
            <span>raido</span>
            <br />
            <input name="rt1" type="radio" value="a" />a
            <input name="rt1" type="radio" value="b" />b
            <input name="rt1" type="radio" value="c" />c
            <input name="rt1" type="radio" value="d" />d
            <input name="rt1" type="radio" value="e" />e
             <br />
            <br />


            <!--select-->
            <span>select範例：</span>
            <br />
            <span>學歷</span>
            <select id="sel1">
                <option value="碩士">碩士</option>
                <option value="大學">大學</option>
                <option value="五專">五專</option>
                <option value="高中">高中</option>
                <option value="國中">國中</option>
            </select>
            <br />
            <br />

            <!--按鈕-->
            check
            <input type="button" onclick="funChkSelAll()" value="check sel" />
            <br />
            radio
            <input type="button" onclick="funRadioSelAll()" value="radio sel" />
            <input type="button" onclick="funRadioSetAssign()" value="radio set assign" />

            <br />
            select
            <input type="button" onclick="funSelectSel()" value="select get" />
            <input type="button" onclick="funSelectAddOption()" value="select Add option" />
            <input type="button" onclick="funSelectRemoveOption()" value="select Remove Option" />
            <input type="button" onclick="funSelectEmpty()" value="select empty Option" />
            <br />
            結果:
            <label id="lbMsg"></label>
            <br />
            <input type="text" id="txt1" />
        </div>

javascript

 

1.所有checkbox 項目 並勾選或取消

//按下按鈕後 遍例 所有checkbox 項目 並勾選或取消
        $("#clickAll").click(function () {
            if ($("#clickAll").prop("checked")) {
                $("input[name='interest']").each(function () {
                    $(this).prop("checked", true); //勾選
                    // $(this).attr("checked",true);//法2
                });
            } else {
                $("input[name='interest']").each(function () {
                    $(this).prop("checked", false);//取消勾選
                });
            }
        });

 

2.取得所有checkbox 勾選項目

//取得所有checkbox 勾選項目 並顯示
        function funChkSelAll() {

            var vLevellist = new Array();
            //取得所有checkbox 勾選項目
            var vLevel = $("input[name='interest']:checked").each(function (i, item) {
                vLevellist.push($(item).val());
            });

            var vResult = "";
            //顯示資料並以,分隔
            for (var i in vLevellist) {
                if (vResult != "") {
                    vResult += ",";
                }
                vResult += vLevellist[i];
            }
            $("#lbMsg").text(vResult);
            $("#txt1").val(vResult);
        }

 

3.radio 取得選取項

        //radio 取得選取項
        function funRadioSelAll() {

            var result = "";
            //$("input[type=radio]:checked").each(function ()
            $("input[name='rt1']:checked").each(function () {
                result = $(this).val();
            });
        }

 

4.設定指定的radio button

        //設定指定的radio button
        function funRadioSetAssign() {
            $("input[type=radio]")[1].checked = true;
        }

 

4.取得select 選取項目

function funSelectSel() {
            /*$("div.dynamically select option:selected").each(function ()*/
            /* $("select option:selected").each(function ()*/
            $("#sel1 option:selected").each(function () {
                result = $(this).text();
            });
        }

 

 

5.增加一個 <option> 項目

        function funSelectAddOption() {
            $("select").append("<option value='國小'>國小</option>");//增加一個 <option> 項目，至後面。
            $("select").prepend("<option value=''>please select</option>");//增加一個 <option> 項目，至前面。
        }

 

 

6.刪除一個<option>

function funSelectRemoveOption() {
            //刪除第一個<option> 項目。
            $("select option:first").remove();
            $("select option:first-child").remove(); /* 影響全部符合的 select 元素 */


            // 刪除最後一個<option> 項目。
            $("select option:last").remove();
            $("select option:last-child").remove(); /* 影響全部符合的 select 元素 */

            //刪除值為<option> 項目。
            $("select option[value='大學']").remove();

        }

 

7.清空select tab的所有option

function funSelectEmpty() {
            //清空 <select> 中全部的<option>項目。
            $("select").empty();
        }