[JS]: JS 常用事件及属性

1. CheckBox event:

    html: <input type="checkBox" id="demoCbx" name="demoCbx" style="#" class="#">
          <label for="checkBox" style="#" class="#">demo checkBox</label>
        
    JS: $(document).on("click","[name='demoCbx']",function(){
      if($("#demoCbx").is(":checked"){
        // TODO checked
      }else{
        // TODO unchecked
      }
    });
    

2. Radio event:

   html: <input type="radio" id="maleRdo" name="gender" value="M" style="#" class="#" οnclick="radioChange(this)">
         <label for="maleRdo" style="#" class="#">Male</label>
         <input type="radio" id="femaleRdo" name="gender" value="F" style="#" class="#" οnclick="radioChange(this)">
         <label for="femaleRdo" style="#" class="#">Female</label>
        
   JS:     
     a) var radioChange = function(obj){
          var value = obj.value;
          if(value === "M"){
            // TODO male check
          } else{
            // TODO female check
          }
        }；
    
     b) $(document).on("click","[name='gender']",function(obj){
          var value = $('input:radio[name="gender"]:checked').val();
          if(value === "M"){
            // TODO male check
          } else{
            // TODO female check
          }
        })；
        

3. Remove or add attribute under an area

   html: <div id="demodiv">
           <input type="text" id="demoInput1">
           <input type="radio" id="demoInput2">
           <input type="file" id="demoInput3">
           <input type="file" id="demo4">
           // ...
         </div>
        
   JS:  
        // demodiv 里所有input标签添加 disabled属性
        $("#demodiv").find("input").attr("disabled":"disabled");
        // demodiv 里所有input标签移除 disabled属性
        $("#demodiv").find("input").removeAttr("disabled");
        // demodiv 里一共有几个input标签
        $("#demodiv").find("input").length;
        // demodiv 里一共有几个命名以 demoInput开头的input标签
        $("#demodiv").find("input[name^='demoInput']").length