单选框多选框,选择发生改变触发

来源:互联网 发布:手机淘宝上买二手 编辑:程序博客网 时间:2024/06/06 00:54

           开通博客已有好长一段时间,太懒,一直没有去写。近来公司最为要好的一前端小伙伴要离职,忙得不可开交,所以也就不得不自己做页面。当然,也是他告诉我,要写自己的博客,作为技术进步的见证。

           实现效果:

              radio,checkbox选择发生改变时触发事件。

           <td>
        <input type = "radio" name = "radio1" value = "A" class = "ends"/> a)first <br />
        <input type = "radio" name = "radio1" value = "B" class = "ends"/> b)next<br />
            <input type = "radio" name = "radio1" value = "C" class = "ends"/> c)final <br />     
        </td>

      以下为JS实现:

$(document).ready(function (){//这个就是jQueryready ,它就像C语言的main 所有操作包含在它里面 
$('.ends').click(function(){
var value="";
 var radio=document.getElementsByName("radio1");
 for(var i=0;i<radio.length;i++){
       if(radio[i].checked==true){
         value=radio[i].value;

/*实现效果为,选择A和其他选项时分别会给button1更换背景图片*/

         if(value=="A"){
                 document.getElementById("button1").style.backgroundImage="url(images/submit_question.png)";
         }else{
       document.getElementById("button1").style.backgroundImage="url(images/next.png)"; 
         }
         break;
       }
 }
   });

});

以此类推,其实很多地方都可以采用这种添加class的方式来实现。


0 0