JQuery一些事件text、checkbox、radio、select

最新推荐文章于 2021-02-05 20:31:34 发布

KingCruel

最新推荐文章于 2021-02-05 20:31:34 发布

阅读量5k

点赞数

分类专栏： JavaScript 文章标签： checkbox JQuery事件 Radio select text

本文链接：https://blog.csdn.net/KingCruel/article/details/8277489

版权

JavaScript 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

hasClass:检查css样式是否存在

if ($('#btnUpdateApartment').hasClass('disabled')) {
    return;
}

检查某个控件的某个属性是否存在

function check() {
    alert($("#btnUpdateApartment").attr("disabled"));
    if (typeof ($("#btnUpdateApartment").attr("disabled")) == "undefined") {
        $('#btnUpdateApartment').attr('disabled', 'disabled');
    }
    else {
        $('#btnUpdateApartment').removeAttr('disabled');
    }
}

<!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>
    <title>一些事件</title>
    <script src="js/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
    ========================================================================================================<br />
    blur事件：元素失去焦点将触发<br />
    ========================================================================================================<br />
    <table>
        <tr>
            <td>
                <input id="Text1" type="text" />
            </td>
            <td>
                <input id="Text2" type="text" />
            </td>
            <td>
                <div id="Text1Div">
                </div>
            </td>
            <td>
                <div>
                </div>
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        $('#Text1').blur(function () {
            $('#Text2').val('sdsd');
            $("div").text("aaa");
            $("#Text1Div").text("sdfsd");
            //alert('Handler for .blur() called.');
        });
    </script>
    ========================================================================================================<br />
    change事件：元素的值改变的时候将触发<br />
    ========================================================================================================<br />
    <table>
        <tr>
            <td>
                <input id="focus" type="text" />
            </td>
            <td>
                <input id="Text4" type="text" />
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        $("#focus").change(function () {
            $("#Text4").val("文本框值改变的时候将触发");
        });
    </script>
    <select name="sweets" multiple="multiple">
        <option>Chocolate</option>
        <option selected="selected">Candy</option>
        <option>Taffy</option>
        <option selected="selected">Caramel</option>
        <option>Fudge</option>
        <option>Cookie</option>
    </select>
    <div>
    </div>
    <script type="text/javascript">
        $("select").change(function () {
            var str = "";
            $("select option:selected").each(function () {
                str += $(this).text() + " ";
            });
            $("div").text(str);
        })
        .change();
    </script>  ========================================================================================================<br />
    click事件：元素被点击时候将触发事件<br />
    ========================================================================================================<br />
    <table>
        <tr>
            <td>
                <input id="Text5" type="text" />
            </td>
            <td>
                <input id="Text6" type="text" />
            </td>
            <td>
                <input id="Button1" type="button" value="单击事件" />
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        $("#Text5").click(function () {
            $("#Text6").val("文本框单击事件");
        });

        $("#Button1").click(function () {
            $("#Text6").val("按钮单击事件");
        });
    </script>
    ========================================================================================================<br />
    focus事件：获得焦点时候将触发事件<br />
    ========================================================================================================<br />
    <table>
        <tr>
            <td>
                <input id="Text7" type="text" />
            </td>
            <td>
                <input id="Text8" type="text" />
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        $("#Text7").focus(function () {
            $("#Text8").val("获得焦点时候将触发事件");
        });
    </script>
    ========================================================================================================<br />
    dblclick事件：当鼠标指针进入和离开元素时被执行,hover()方法是同时绑定 mouseenter和 .hover()事件<br />
    ========================================================================================================<br />
    <table>
        <tr>
            <td>
                <input id="Text3" type="text" />
            </td>
            <td>
                <input id="Text9" type="text" />
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        $("#Text3").dblclick(function () {
            $("#Text9").val("被双击时候将触发事件");
        });
    </script>
    ========================================================================================================<br />
    checkbox赋值<br />
    ========================================================================================================<br />
    <script type="text/javascript">
        $(document).ready(function () {
            var checkboxs = $(':checkbox'); //获得全部的checkbox对象，并以数组形式返回
            var data = "11,22,32,42,5,6,7,8,9";
            var items = data.split(',');
            $(':checkbox').each(function () {
                for (var i = 0; i < items.length; i++) {
                    if ($(this).val() == items[i]) {
                        $(this).attr("checked", true);
                    }
                }
            });
        });
    </script>
    <input type="checkbox" value='1' name='num666' />
    <input type="checkbox" value='2' name='num666' />
    <input type="checkbox" value='3' name='num666' />
    <input type="checkbox" value='4' name='num666' />
    <input type="checkbox" value='5' name='num666' />
    <input type="checkbox" value='6' name='num666' />
    <input type="checkbox" value='7' name='num666' />
    <input type="checkbox" value='8' name='num666' />
    <input type="checkbox" value='9' name='num666' />
    <input id="btnCheckValue" type="button" value="获取复选框被选中的值" />
    <script type="text/javascript">
        $("#btnCheckValue").click(function () {
            var str = "";
            $("[name='num666'][checked]").each(function () {
                str += $(this).val() + "\r\n";
            })

<span style="white-space:pre">	</span>    没有被选中的值

<span style="white-space:pre">	</span>    $("[name='Item']").not("[checked]").each(function () {
                        strFalse += $(this).val() + "\r\n";
            })

            alert(str);
        });
    </script>
    ========================================================================================================<br />
    radio单选按钮<br />
    ========================================================================================================<br />
    <input id="Radio1" type="radio" name="radKing" value="控件1" /><label for="Radio1">控件1</label><br />
    <input id="Radio2" type="radio" name="radKing" value="控件2" /><label for="Radio2">控件2</label><br />
    <input id="Radio3" type="radio" name="radKing" value="控件3" /><label for="Radio3">控件3</label><br />
    <input id="Radio4" type="radio" name="radKing" value="控件4" /><label for="Radio4">控件4</label><br />
    <input id="Radio5" type="radio" name="radKing" value="控件5" />控件5<br />
    <input id="Radio6" type="radio" name="radKing" value="控件6" />控件6<br />
    <br />
    <input id="Button2" type="button" value="获取选中的值" /><input id="Button3" type="button"
        value="第一个被选中" /><input id="Button4" type="button" value="第N个值被选中" />
    <script type="text/javascript">
        $("#Button2").click(function () {
            var str = $("input[name='radKing']:checked").val();
            var querytype = $(":radio[name=radKing][checked]").val(); //ie及火狐下获取通用
            alert(str + "," + querytype);
        });
        $("#Button3").click(function () {
            $('input[name=radKing]:radio:first').attr('checked', 'checked');
        });
        $("#Button4").click(function () {
            $("input[name=radKing]:radio[value='控件5']").attr('checked', 'true');
        });
    </script>
    ========================================================================================================<br />
    radio单选按钮选择图片按钮被选中<br />
    ========================================================================================================<br />
    <div class="check_pay success_pay">
        <span>请点击以下银行支付：</span>
        <ul>
            <li>
                <input id="rad1" runat="server" name="check_pay_radio" type="radio" class="check_pay_radio"
                    value="ICBC" checked />
                <img src="../images/gs.gif" alt="" onclick="checked('rad1')" /></li>
            <li>
                <input id="rad2" runat="server" name="check_pay_radio" type="radio" class="check_pay_radio"
                    value="CCB" />
                <img src="../images/gj.gif" alt="" onclick="checked('rad2')" /></li>
            <li>
                <input id="rad3" runat="server" name="check_pay_radio" type="radio" class="check_pay_radio"
                    value="CMB" />
                <img src="../images/zs.gif" alt="" onclick="checked('rad3')" /></li>
            <li>
                <input id="rad4" runat="server" name="check_pay_radio" type="radio" class="check_pay_radio"
                    value="COMM" />
                <img src="../images/ht.gif" alt="" onclick="checked('rad4')" /></li>
            <li>
                <input id="rad5" runat="server" name="check_pay_radio" type="radio" class="check_pay_radio"
                    value="ABC" />
                <img src="../images/ny.gif" alt="" onclick="checked('rad5')" /></li>
            <li>
                <input id="rad6" runat="server" name="check_pay_radio" type="radio" class="check_pay_radio"
                    value="GDB" />
                <img src="../images/gf.gif" alt="" onclick="checked('rad6')" /></li>
            <li>
                <input id="rad7" runat="server" name="check_pay_radio" type="radio" class="check_pay_radio"
                    value="CIB" />
                <img src="../images/xy.gif" alt="" onclick="checked('rad7')" /></li>
            <li>
                <input id="rad8" runat="server" name="check_pay_radio" type="radio" class="check_pay_radio"
                    value="CEB" />
                <img src="../images/gd.gif" alt="" onclick="checked('rad8')" /></li>
        </ul>
    </div>
    <script type="text/javascript">
        function checked(elm_id) {
            var danxuananniu = document.getElementById(elm_id);
            danxuananniu.checked = "checked";
            alert(document.getElementById(elm_id).value);
        }
    </script>
    ========================================================================================================<br />
    hover事件：元素被双击时候将触发事件<br />
    ========================================================================================================<br />
    <div id="oilk">
        <ul>
            <li>Milk</li>
            <li>Bread</li>
            <li class='fade'>Chips</li>
            <li class='fade'>Socks</li>
        </ul>
    </div>
    <script type="text/javascript">
        $("#oilk li").hover(
            function () {
                $(this).append($("<span> ***</span>"));
            },
            function () {
                $(this).find("span:last").remove();
            }
            );
        $("#oilk li.fade").hover(function () { $(this).fadeOut(100); $(this).fadeIn(500); });
    </script>
</body><pre name="code" class="html">    <style type="text/css">
        .check_pay
        {
            width: 864px;
            border: 1px solid #FEE0BE;
            margin: 8px 0px 0px 40px;
            display: inline;
            padding: 0px 0px 5px 0px;
        }
        .check_pay span
        {
            width: 834px;
            height: 20px;
            line-height: 20px;
            float: left;
            padding: 15px 15px 0px 15px;
            font-weight: bold;
        }
        .check_pay ul
        {
            width: 864px;
            float: left;
            padding-bottom: 10px;
        }
        .check_pay ul li
        {
            width: 185px;
            height: 40px;
            float: left;
            margin: 10px 0px 0px 15px;
            display: inline;
        }
        .check_pay ul li img
        {
            width: 138px;
            height: 38px;
            float: left;
            border: 1px solid #ddd;
        }
        .check_pay_radio
        {
            width: 14px;
            height: 14px;
            float: left;
            margin: 12px 10px 0px 0px;
            display: inline;
        }
        
        #oilk ul
        {
            margin-left: 20px;
            color: blue;
        }
        #oilk li
        {
            cursor: default;
        }
        #oilk span
        {
            color: red;
        }
    </style>

</html>

KingCruel

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQuery一些事件text、checkbox、radio、select

hasClass:检查css样式是否存在if ($('#btnUpdateApartment').hasClass('disabled')) { return;}检查某个控件的某个属性是否存在function check() { alert($("#btnUpdateApartment").attr("disabled")); if (typeof ($(...
复制链接

扫一扫

专栏目录