[HTML5] radio改變觸發change事件

阿新 • • 發佈：2019-01-15

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #frame{
            width:600px;
            height:300px;
            border:solid 0px gold;
        }
        #left{
            float:left;
        }
        #right{
            float:left;
            margin:30px;
        }
        fieldset{
            width:350px;
            height:200px;
        }
        img{
            width:140px;
            height:200px;
        }
        input{
            margin:15px;
        }
        .img1{
            width:140px;
            height:200px;
            border:solid 1px grey;
        }
        .img2{
            width:140px;
            height:200px;
            border:solid 1px red;
        }
        .img3{
            width:140px;
            height:200px;
            border:solid 3px red;
        }
        .img4{
            width:140px;
            height:200px;
            border:solid 3px red;
            padding:3px;
        }
        #text{
            float:left;
            margin-left:5px;
        }
        #tip{
            float:left;
        }
    </style>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <div id="frame">
        <div id="left">
            <fieldset>
                <legend>設定</legend>
                <input id="first" type="radio" name="style" value="1"/><label for="first">加框</label> <br/>
                <input id="second" type="radio" name="style" value="2"/><label for="second">加紅色框</label> <br/>
                <input id="third" type="radio" name="style" value="3"/><label for="third">加紅色粗線框</label> <br/>
                <input id="forth" type="radio" name="style" value="4"/><label for="forth">加紅色有內邊距粗線框</label> <br/>
            </fieldset>
            <div id="text">當前狀態：</div>
            <div id="tip">什麼都沒有...</div>
        </div>
        <div id="right">
            <img id="pic" src="img/kanade.jpg" alt=""/>
        </div>
    </div>
    <script type="text/javascript">
        $("input:radio[name='style']").change(function (){
            var opt=$("input:radio[name='style']:checked").val();//①
            $("#pic").removeClass();
            $("#pic").addClass("img"+opt);
            $("#tip").text($("input[name='style']:checked").next("label").text());//②
            $("#tip").css("color","red");
        });
    </script>
</body>
</html>

放了假學習了一下HTML5，感覺做起來很有成就感呢，JQ太不熟，用JQ獲得選定內容時卡了很久。

1.①單選的實現：將單選框用name統一聯絡起來；

2.①取選項的值時用函式val()，剛開始想當然的用.value

3.緊接著下面的四行JQ程式碼是比較得意的一段。進行了優化，沒有用四個if語句造成冗餘

4.②取出radio後面的選項文字可以把文字用<label for="...">表示，以便於靈活的呼叫，呼叫方法$(...).next("label").text()

[HTML5] radio改變觸發change事件

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style

element-ui 點擊編輯彈出dialog組件中select組件綁定值改變，但是不觸發change事件

select http inf 視頻 log OS src AR gpo 代碼結構如下：現象視頻如下：現象原因：經過排查發現此時點擊操作不觸發chang事件，後臺響應數據中沒有訂單取消原因orderCanleRemark字段，此時導致不觸發change事件，

element-ui中select元件繫結值改變，觸發change事件

1.安裝vuecli腳手架 2.終端輸入 cnpm i element-ui -S 安裝element-ui 3.按需引入select元件在main.js中寫入如下程式碼 /* 匯入第三方庫開始 */ import 'element-ui/

H5頁面可見性改變(visibility change)事件

div 對象 def pau -c param mobile set number H5有一個事件叫 visibilitychange ，當瀏覽器的某個標簽頁切換到後臺，或從後臺切換到前臺時就會觸發該消息。如下： document.addEventListener("vis

解決上傳文件或圖片時選擇相同文件無法觸發change事件的問題

同文件文件的昨天遇到上傳 put AS 事件 clas 昨天在做一個上傳文件的模塊時遇到了這樣的問題：打開文件一上傳，上傳成功後再次點擊文件一，change事件無反應 <input type="file" name="file" class="file-in

Input值改變觸發的事件

//當值馬上改變時觸發，鍵盤按下時觸發 $('input[name="price_min"]').on('input propertychange', function() { alert(2) }) //nput失去焦點後如果值發生改變後，觸發 $('input[name="price

ie中的radio click()不能觸發radio的change事件

jquery版本：1.7.2 瀏覽器版本：ie8 測試程式碼如下，實現的功能是頁面載入後，點選單選框的第一項。使之成為選中的狀態 <html lang="zh-cn"> <head> <meta charset="ut

radio改變事件

需要如果 value customer rip cti hang 改變 log 當單選框改變時觸發事件 <input type="radio" name="isclient" value="1" checked id="customer"><lab

radio change事件

field tex true 事件 func 沒有 text 適用於方法 change事件 <input type="radio" name="rr" value=“1” /> <input type="radio" name="rr" value="2

onchange監聽input值變化及input隱藏後change事件不觸發的原因與解決方法(設定readonly後onchange不起作用的解決方案)

轉自：https://www.cnblogs.com/white0710/p/7338456.html 1. onchange事件監聽input值變化的使用方法: <input id="test"></input> $("input"

onchange監聽input值變化及input隱藏後change事件不觸發的原因與解決方法(設置readonly後onchange不起作用的解決方案)

com sdn 使用方法 pan val 內容 tar span .html 轉自：https://www.cnblogs.com/white0710/p/7338456.html 1. onchange事件監聽input值變化的使用方法: <input id=

Input type="file"上傳檔案change事件只觸發一次解決方案

一、剛開始用法 $(function () { $("#file").change(excelUpload); }) excelUpload()函式內部就是提示是否確認上傳動作，一開始這樣寫只有在第一次選擇上傳檔案的時候觸發了excelUpload函式，顯然這樣是不行的。後來網上有人說快

layui select下拉框改變之 change 監聽事件

在layui中使用 jquery 觸發select 的 change事件無效使用layui.use監聽select事件 <select lay-filter="dem

記一個關於 Select 的小 bug：Select 的 on-change 事件會自動觸發

iView Select 框在頁面載入的時候會彈出還沒有觸發的方法裡面的錯誤資訊，如下：程式碼： <Select v-model="form.id" filterable clearable @on-change="selectAccount"> <Opt

js和jquery動態實現radio選中觸發事件

最近寫的功能是根據radio選中不同的值實現觸發對應的事件，現將實現方法總結如下： html如下： <div id="div_pathType"> <input name="pathType" class="page_input_radio" id="pathType"

單選框radio改變事件

<input type="radio" name="bedStatus" id="allot" checked="checked" value="allot">Allot <input

select下拉列表和 radio單選按鈕控制元件開關---- 根據值選擇選項 & change事件

select option選項 1）下拉列表根據值，選中其中一個選項：根據value值選中： $("#orientation option[value= '"+ orientation_val +"']").attr('selected',true); 根據text值選

重寫radio單選框選中按鈕然後觸發其他事件

首先編寫下面日期資訊對應的程式碼如下 <input type="hidden" name="fdLoop" id="fdLoop" value="3" />  <input type="radio" name="rdL

JS改變input的value值不觸發onchange事件解決方案（超簡版）

監聽js改變input的值觸發的onchange事件 $("#inpstart").attr("value",$("#inpend")[0].value); 當我們像上面這樣給一個input賦值時，由於onchange時間對input框不起作用，大家首先會想到使用

Angular5採用layui前端UI框架，trigger模擬change事件不能觸發ngModel資料更新的解決方案

本教程適用於所有符合情況的第三方UI框架；如果你想在Angular中使用Layui框架，想必已經發現Layui已經用div+css重寫了select、radio、CheckBox等表單元素的樣式，原元素被display="none"隱藏掉了。那麼問題來了，使用者操作的是

[HTML5] radio改變觸發change事件

相關推薦