diff --git a/media/css/seahub.css b/media/css/seahub.css
index aeffa90258..f6aff74b28 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -190,12 +190,14 @@ textarea {
     outline:0;
 }
 textarea, input { border: 1px solid #ccc; }
-input { height:22px; margin:3px 0; outline:0; }
+input {
+    margin:3px 0;
+    outline:0;
+}
 input, button { display:inline-block;/*for ie*/ }
-input[type=submit],
-input[type=button],
-input.submit {
-    height:auto;
+input[type=text],
+input[type=password] {
+    height:22px;
 }
 button,
 input[type=submit],
@@ -232,10 +234,10 @@ select {
     text-decoration:none;
 }
 input[type=radio] {
-    height:auto;
     border:0;/*for ie*/
 }
-input:focus {
+input:focus,
+textarea:focus {
   border-color: #66afe9;
   outline: none;
 }
@@ -316,7 +318,7 @@ table {
     table-layout:fixed;
     margin:8px 0 40px;
 }
-caption {font-size:1.1em; font-weight:bold; margin-bottom:.6em;}
+caption { font-size:1.1em; font-weight:bold; margin-bottom:.6em; }
 th { text-align:left; font-weight:normal; color:#9c9c9c; }
 td, th { padding:5px 3px; word-wrap:break-word; border-bottom:1px solid #eee; }
 td { color: #333; font-size:14px; }
@@ -410,18 +412,12 @@ p { margin:0.5em 0; }
     display:block;
     margin:1em auto;
 }
-.icon-plus, .icon-minus, .icon-pencil,
-.repo-file-list .icon-star-empty,
-.repo-file-list .icon-star {
+.icon-plus, .icon-minus, .icon-pencil {
     font-size:16px;
     line-height:1;
-}
-.icon-plus, .icon-minus, .icon-pencil {
     color:#444;
     margin-left:3px;
 }
-.repo-file-list .icon-star-empty { color:#d0d0d0; }
-.repo-file-list .icon-star { color:#505050; }
 .op,
 .more {
     font-weight:normal;
@@ -480,28 +476,9 @@ input.btn-disabled:hover {/*for input*/
     cursor:default;
     background: #efefef;
 }
-.op-icon-btn {/* icon btn */
-    font-size:14px;
-    padding:4px 12px;
-    line-height:20px;
-    text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);
-    background-color:#f5f5f5;background-image:-moz-linear-gradient(top, #ffffff, #e6e6e6);background-image:-webkit-linear-gradient(top, #ffffff, #e6e6e6);background-image:linear-gradient(to bottom, #ffffff, #e6e6e6);background-repeat:repeat-x;border:1px solid #cccccc;border-bottom-color:#b3b3b3;border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-}
-.op-icon-btn:hover {
-    background-color: #E6E6E6;
-    background-position: 0 -15px; /* to rm background-image */
-}
-.op-list li,
-.checkbox,
-.checkbox-checked,
 .modalCloseImg {
     background:transparent url('../img/bg.png') no-repeat scroll 0 0;
 }
-.op-list li {
-    padding-left:23px;
-    line-height:23px;
-    background-position:0 3px;
-}
 .add {
     color:#909090;
     margin-right:3px;
@@ -775,32 +752,6 @@ textarea:-moz-placeholder {/* for FF */
     background:#fff;
 }
 /**** checkbox ****/
-.checkbox-orig {
-    width:14px;
-    height:14px;
-    font-size:0;
-    opacity:0;
-    filter: alpha(opacity=0);
-    cursor:pointer;
-    position:absolute;
-    margin:0;
-}
-.checkbox {
-    position:relative;
-    display:inline-block;
-    width:15px;
-    height:15px;
-    background-position: 0 -1135px;
-    margin-right:4px;
-}
-.checkbox-checked {
-    background-position: 0 -1153px;
-}
-.checkbox-label .avatar,
-.checkbox,
-.checkbox-option {
-    vertical-align:middle;
-}
 .checkbox-label {
     display:block;
 }
@@ -1933,6 +1884,12 @@ button.dropdown-toggle:focus {
 .repo-file-list .star {
     width:25px;
 }
+.repo-file-list .icon-star-empty { color:#d0d0d0; }
+.repo-file-list .icon-star { color:#505050; }
+.repo-file-list .icon-star-empty,
+.repo-file-list .icon-star {
+    font-size:16px;
+}
 .repo-file-list .dirent-icon {
     width:27px;
     text-align:center;
@@ -1950,10 +1907,6 @@ button.dropdown-toggle:focus {
 .repo-file-list .dirent-op {
     width:200px;
 }
-.repo-file-list .checkbox-label,
-.repo-file-list .checkbox {
-    margin:0;
-}
 .repo-file-list th {
     padding-top:20px;
 }
diff --git a/media/js/base.js b/media/js/base.js
index 1233b7b721..0a3a825a2c 100644
--- a/media/js/base.js
+++ b/media/js/base.js
@@ -1,7 +1,3 @@
-$('.checkbox-orig').click(function() {
-    $(this).parent().toggleClass('checkbox-checked');
-});
-
 $('#title-panel, #left-panel, #right-panel').each(function() { // for ie 7
     if ($(this).children().length == 0) {
         $(this).addClass('hide');
@@ -182,15 +178,6 @@ $('.search-form').submit(function() {
     }
 });
 
-$(".checkbox-label").hover(
-	function() {
-		$(this).addClass('hl');
-	},
-	function() {
-		$(this).removeClass('hl');
-	}
-);
-
 $("tr:gt(0)", $('table')).hover(
     function() {
 		$(this).addClass('hl');
diff --git a/seahub/templates/home_base.html b/seahub/templates/home_base.html
index ae3cc3498b..07214b041b 100644
--- a/seahub/templates/home_base.html
+++ b/seahub/templates/home_base.html
@@ -73,14 +73,14 @@
       {% if mod == 'personal wiki' %}
       <li>
       <label class="checkbox-label">
-          <span class="checkbox {% if mod in request.user.mods_enabled %}checkbox-checked{% endif %}"><input type="checkbox" name="personal_wiki" class="checkbox-orig" {%if mod in request.user.mods_enabled%}checked{% endif%} /></span>
-          <span class="checkbox-option">{% trans "Personal Wiki" %}</span>
+          <input type="checkbox" name="personal_wiki" class="vam" {%if mod in request.user.mods_enabled%}checked="checked"{% endif%} />
+          <span class="checkbox-option vam">{% trans "Personal Wiki" %}</span>
       </label>
       </li>
       {% endif %}
     {% endfor %}
     </ul>
-    <input type="submit" id="mods-enable-submit" value="{% trans "Submit"%}" class="submit"/>
+    <input type="submit" id="mods-enable-submit" value="{% trans "Submit"%}" class="submit" />
 </form>
 {% endif %}
 {% endblock %}
diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index 785e771c65..f20d3741f7 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -15,8 +15,8 @@
         <% if (enable_encrypted_library) { %>
         <div class="repo-create-encryption">
             <label class="checkbox-label">
-                <span class="checkbox"><input type="checkbox" name="encryption" id="encrypt-switch" class="checkbox-orig" /></span>
-                <span class="checkbox-option">{% trans "Encrypt" %}</span>
+                <input type="checkbox" name="encryption" id="encrypt-switch" class="vam" />
+                <span class="checkbox-option vam">{% trans "Encrypt" %}</span>
             </label>
             <label>{% trans "Password" %}</label><span class="tip">{% blocktrans %}(at least {{repo_password_min_length}} characters){% endblocktrans %}</span><br />
             <input type="password" name="passwd" disabled="disabled" class="input input-disabled" /><br />
@@ -171,7 +171,7 @@
 <script type="text/template" id="dirents-hd-tmpl">
     <tr>
         <th class="select">
-            <span class="checkbox"><input type="checkbox" class="checkbox-orig" /></span>
+            <input type="checkbox" class="vam" />
         </th>
         <th class="star"></th>
         <th class="dirent-icon"></th>
@@ -186,9 +186,9 @@
     <% if (dirent.is_dir) { %>
     <td class="select">
         <% if (dirent.selected) { %>
-        <span class="checkbox checkbox-checked"><input type="checkbox" class="checkbox-orig" checked="checked" /></span>
+        <input type="checkbox" class="vam" checked="checked" />
         <% } else { %>
-        <span class="checkbox"><input type="checkbox" class="checkbox-orig" /></span>
+        <input type="checkbox" class="vam" />
         <% } %>
     </td>
     <td class="star"></td>
@@ -237,9 +237,9 @@
     <% } else { %>
     <td class="select">
         <% if (dirent.selected) { %>
-        <span class="checkbox checkbox-checked"><input type="checkbox" class="checkbox-orig" checked="checked" /></span>
+        <input type="checkbox" class="vam" checked="checked" />
         <% } else { %>
-        <span class="checkbox"><input type="checkbox" class="checkbox-orig" /></span>
+        <input type="checkbox" class="vam" />
         <% } %>
     </td>
     <td class="star alc">
@@ -438,8 +438,8 @@
             <div id="download-link-share" class="tabs-panel">
                 <form id="generate-download-link-form" action="" class="hide">
                     <label class="checkbox-label">
-                        <span class="checkbox"><input type="checkbox" name="use_passwd" class="checkbox-orig" /></span>
-                        <span class="checkbox-option">{% trans "Add password protection"%}</span>
+                        <input type="checkbox" name="use_passwd" class="vam" />
+                        <span class="checkbox-option vam">{% trans "Add password protection"%}</span>
                     </label>
                     <div class="hide">
                         <label>{% trans "Password" %}</label><span class="tip">{% blocktrans %}(at least {{share_link_password_min_length}} characters){% endblocktrans %}</span>
@@ -452,8 +452,8 @@
                         <input type="password" name="password_again" class="input" />
                     </div>
                     <label class="checkbox-label">
-                        <span class="checkbox"><input type="checkbox" name="set_expiration" class="checkbox-orig" /></span>
-                        <span class="checkbox-option">{% trans "Add auto expiration"%}</span>
+                        <input type="checkbox" name="set_expiration" class="vam" />
+                        <span class="checkbox-option vam">{% trans "Add auto expiration"%}</span>
                     </label>
                     <div class="hide">
                         <label>{% trans "Days" %}</label><br />
@@ -493,8 +493,8 @@
                 <p class="tip">{% trans "You can share the generated link to others and then they can upload files to this directory via the link." %}</p>
                 <form id="generate-upload-link-form" action="" class="hide">
                     <label class="checkbox-label">
-                        <span class="checkbox"><input type="checkbox" name="use_passwd" class="checkbox-orig" /></span>
-                        <span class="checkbox-option">{% trans "Add password protection"%}</span>
+                        <input type="checkbox" name="use_passwd" class="vam" />
+                        <span class="checkbox-option vam">{% trans "Add password protection"%}</span>
                     </label>
                     <div class="hide">
                         <label>{% trans "Password" %}</label><span class="tip">{% blocktrans %}(at least {{share_link_password_min_length}} characters){% endblocktrans %}</span>
@@ -690,9 +690,9 @@
             <li>
             <label class="checkbox-label">
                 <% if (mods_enabled.indexOf(mods_available[i]) != -1) { %>
-                <span class="checkbox checkbox-checked"><input type="checkbox" name="personal_wiki" class="checkbox-orig" checked="checked" /></span>
+                <input type="checkbox" name="personal_wiki" class="vam" checked="checked" />
                 <% } else { %>
-                <span class="checkbox"><input type="checkbox" name="personal_wiki" class="checkbox-orig" /></span>
+                <input type="checkbox" name="personal_wiki" class="vam" />
                 <% } %>
                 <span class="checkbox-option">{% trans "Personal Wiki" %}</span>
             </label>
@@ -720,28 +720,6 @@
     </div>
 </div>
 </script>
-<script type="text/template" id="group-mods-enable-form-tmpl">
-<form id="mods-enable-form" method="post" action="" class="hide">{% csrf_token%}
-    <h3>{% trans "Enable Modules"%}</h3>
-    <ul>
-        <% for (var i = 0, len = mods_available.length; i < len; i++) { %>
-            <% if (mods_available[i] == 'group wiki') { %>
-            <li>
-            <label class="checkbox-label">
-                <% if (mods_enabled.indexOf(mods_available[i]) != -1) { %>
-                <span class="checkbox checkbox-checked"><input type="checkbox" name="group_wiki" class="checkbox-orig" checked="checked" /></span>
-                <% } else { %>
-                <span class="checkbox"><input type="checkbox" name="group_wiki" class="checkbox-orig" /></span>
-                <% } %>
-                <span class="checkbox-option">{% trans "Wiki" %}</span>
-            </label>
-            </li>
-            <% } %>
-        <% } %>
-    </ul>
-    <input type="submit" value="{% trans "Submit"%}" class="submit" />
-</form>
-</script>
 <script type="text/template" id="folder-perm-item-tmpl">
     <% if (for_user) { %>
     <td>
@@ -883,7 +861,7 @@
 </script>
 <script type="text/template" id="add-pubrepo-item-tmpl">
     <td class="select">
-        <span class="checkbox"><input type="checkbox" class="checkbox-orig" /></span>
+        <input type="checkbox" class="vam" />
     </td>
     <td>
       <% if (encrypted) { %>
diff --git a/seahub/templates/registration/login.html b/seahub/templates/registration/login.html
index 3bd7a8c167..be4b50e9ac 100644
--- a/seahub/templates/registration/login.html
+++ b/seahub/templates/registration/login.html
@@ -29,8 +29,8 @@
     {% endif %}
 
     <label class="checkbox-label">
-        <span class="checkbox"><input type="checkbox" name="remember_me" class="checkbox-orig"/></span>
-        <span class="checkbox-option">{% blocktrans %}Remember me for {{remember_days}} days {% endblocktrans %}</span>
+        <input type="checkbox" name="remember_me" class="vam" />
+        <span class="vam">{% blocktrans %}Remember me for {{remember_days}} days {% endblocktrans %}</span>
     </label>
 
     <input type="submit" value="{% trans "Log In" %}" class="submit" />
diff --git a/seahub/templates/snippets/file_share_popup.html b/seahub/templates/snippets/file_share_popup.html
index 98c643a8bd..1572498b5a 100644
--- a/seahub/templates/snippets/file_share_popup.html
+++ b/seahub/templates/snippets/file_share_popup.html
@@ -11,8 +11,8 @@
             <div id="link-share" class="tabs-panel">
                 <div id="link-options">
                     <label class="checkbox-label">
-                        <span class="checkbox"><input type="checkbox" name="use-passwd" id="link-passwd-switch" class="checkbox-orig" /></span>
-                        <span class="checkbox-option">{% trans "Add password protection"%}</span>
+                        <input type="checkbox" name="use-passwd" id="link-passwd-switch" class="vam" />
+                        <span class="checkbox-option vam">{% trans "Add password protection"%}</span>
                     </label>
                     <div id="link-passwd" class="hide">
                         <label>{% trans "Password"%}</label><span class="tip">{% blocktrans %}(at least {{share_link_password_min_length}} characters){% endblocktrans %}</span><br />
@@ -21,8 +21,8 @@
                         <input type="password" name="passwd_again" disabled="disabled" class="input input-disabled" />
                     </div>
                     <label class="checkbox-label">
-                        <span class="checkbox"><input type="checkbox" name="set-expiration" id="link-expire-switch" class="checkbox-orig" /></span>
-                        <span class="checkbox-option">{% trans "Add auto expiration"%}</span>
+                        <input type="checkbox" name="set-expiration" id="link-expire-switch" class="vam" />
+                        <span class="checkbox-option vam">{% trans "Add auto expiration"%}</span>
                     </label>
                     <div id="link-expire" class="hide">
                         <label>{% trans "Days" %}</label><br />
diff --git a/seahub/templates/snippets/repo_create_form.html b/seahub/templates/snippets/repo_create_form.html
deleted file mode 100644
index 561b33b132..0000000000
--- a/seahub/templates/snippets/repo_create_form.html
+++ /dev/null
@@ -1,27 +0,0 @@
-{% load i18n %}
-<form id="repo-create-form" action="" method="post" class="hide">{% csrf_token %}
-    <h3>{% trans "New Library"%}</h3>
-    <label>{% trans "Name"%}</label><br/>
-    <input type="text" name="repo_name" value="" maxlength="{{max_file_name}}" class="input" /><br />
-    <label>{% trans "Description"%}</label><br/>
-    <textarea name="repo_desc" class="textarea"></textarea><br />
-    {% if create_shared_repo %}
-    <label>{% trans "Share Permission"%}</label><br />
-    <select name="permission" class="perm">
-      <option value="rw" selected="selected">{% trans "Read-Write"%}</option>
-      <option value="r">{% trans "Read-Only"%}</option>
-    </select>
-    {% endif %}
-    <div class="repo-create-encryption">
-        <label class="checkbox-label">
-            <span class="checkbox"><input type="checkbox" name="encryption" id="encrypt-switch" class="checkbox-orig" /></span>
-            <span class="checkbox-option">{% trans "Encrypt"%}</span>
-        </label>
-        <label>{% trans "Password"%}</label><span class="tip">{% blocktrans %}(at least {{repo_password_min_length}} characters){% endblocktrans %}</span><br />
-        <input type="password" name="passwd" disabled="disabled" class="input input-disabled" /><br />
-        <label>{% trans "Password again"%}</label><br />
-        <input type="password" name="passwd_again" disabled="disabled" class="input input-disabled" />
-    </div>
-    <p class="error hide"></p>
-    <input type="submit" value="{% trans "Submit"%}" class="submit" />
-</form>
diff --git a/seahub/templates/snippets/search_form.html b/seahub/templates/snippets/search_form.html
index 42ed11efdc..47d85b39ca 100644
--- a/seahub/templates/snippets/search_form.html
+++ b/seahub/templates/snippets/search_form.html
@@ -40,14 +40,38 @@
                         <div class="custom-ftype-options">
                         {% endif %}
                             {# ftype value should be the same with utils/file_types.py #}
-                            <label class="checkbox-label"><span class="checkbox"><input type="checkbox" name="ftype" value="Text" class="checkbox-orig" /></span><span class="checkbox-option">{% trans "Text files" %}</span></label>
-                            <label class="checkbox-label"><span class="checkbox"><input type="checkbox" name="ftype" value="Document" class="checkbox-orig" /></span><span class="checkbox-option">{% trans "Documents" %}</span></label>
-                            <label class="checkbox-label"><span class="checkbox"><input type="checkbox" name="ftype" value="Image" class="checkbox-orig" /></span><span class="checkbox-option">{% trans "Images" %}</span></label>
-                            <label class="checkbox-label"><span class="checkbox"><input type="checkbox" name="ftype" value="Video" class="checkbox-orig" /></span><span class="checkbox-option">{% trans "Video" %}</span></label>
-                            <label class="checkbox-label"><span class="checkbox"><input type="checkbox" name="ftype" value="Audio" class="checkbox-orig" /></span><span class="checkbox-option">{% trans "Audio" %}</span></label>
-                            <label class="checkbox-label"><span class="checkbox"><input type="checkbox" name="ftype" value="SVG" class="checkbox-orig" /></span><span class="checkbox-option">{% trans "svg" %}</span></label>
-                            <label class="checkbox-label"><span class="checkbox"><input type="checkbox" name="ftype" value="PDF" class="checkbox-orig" /></span><span class="checkbox-option">{% trans "pdf" %}</span></label>
-                            <label class="checkbox-label"><span class="checkbox"><input type="checkbox" name="ftype" value="Markdown" class="checkbox-orig" /></span><span class="checkbox-option">{% trans "markdown" %}</span></label>
+                            <label class="checkbox-label">
+                                <input type="checkbox" name="ftype" value="Text" class="vam" />
+                                <span class="vam">{% trans "Text files" %}</span>
+                            </label>
+                            <label class="checkbox-label">
+                                <input type="checkbox" name="ftype" value="Document" class="vam" />
+                                <span class="vam">{% trans "Documents" %}</span>
+                            </label>
+                            <label class="checkbox-label">
+                                <input type="checkbox" name="ftype" value="Image" class="vam" />
+                                <span class="vam">{% trans "Images" %}</span>
+                            </label>
+                            <label class="checkbox-label">
+                                <input type="checkbox" name="ftype" value="Video" class="vam" />
+                                <span class="vam">{% trans "Video" %}</span>
+                            </label>
+                            <label class="checkbox-label">
+                                <input type="checkbox" name="ftype" value="Audio" class="vam" />
+                                <span class="vam">{% trans "Audio" %}</span>
+                            </label>
+                            <label class="checkbox-label">
+                                <input type="checkbox" name="ftype" value="SVG" class="vam" />
+                                <span class="vam">{% trans "svg" %}</span>
+                            </label>
+                            <label class="checkbox-label">
+                                <input type="checkbox" name="ftype" value="PDF" class="vam" />
+                                <span class="vam">{% trans "pdf" %}</span>
+                            </label>
+                            <label class="checkbox-label">
+                                <input type="checkbox" name="ftype" value="Markdown" class="vam" />
+                                <span class="vam">{% trans "markdown" %}</span>
+                            </label>
                             <br/>
                             <input type="text" value="{{ input_fileexts }}" name="input_fexts" placeholder="{% trans "Input file extensions here, separate with ','" %}" class="fileext-input" />
                             <p class="error hide">{% trans "Please select at least one file type or input at least one file extension" %}</p>
diff --git a/seahub/templates/snippets/shared_link_js.html b/seahub/templates/snippets/shared_link_js.html
index 7f4ea87523..c02b68bbfb 100644
--- a/seahub/templates/snippets/shared_link_js.html
+++ b/seahub/templates/snippets/shared_link_js.html
@@ -23,7 +23,7 @@ function showSharePopup(op, name, aj_data, type, cur_path) {
     var path = cur_path + name;
 
     var form = $('#file-share');
-    form.modal({appendTo: "#main",'focus':false, containerCss:{"padding":0}});
+    form.modal({appendTo: "#main", focus:false});
 
     var hd = $('#file-share .hd');
     hd.html(hd.html().replace('%(name)s', '<span class="op-target">' + HTMLescape(trimFilename(name, 30)) + '</span>'));
diff --git a/seahub/templates/snippets/web_settings_form.html b/seahub/templates/snippets/web_settings_form.html
index df524e033c..4b35542c81 100644
--- a/seahub/templates/snippets/web_settings_form.html
+++ b/seahub/templates/snippets/web_settings_form.html
@@ -20,8 +20,8 @@
     <h5 class="web-setting-name">{{ setting_display_name }}</h5>
     <div class="web-setting-input">
         <label class="checkbox-label">
-            <span class="checkbox{% if setting_val %} checkbox-checked{% endif %}"><input class="checkbox-orig web-setting-checkbox" type="checkbox" name="{{ setting_name }}"{% if setting_val %} checked="checked"{% endif %} /></span>
-            <span class="checkbox-option">{{ help_tip }}</span>
+            <input class="web-setting-checkbox vam" type="checkbox" name="{{ setting_name }}"{% if setting_val %} checked="checked"{% endif %} />
+            <span class="vam">{{ help_tip }}</span>
         </label>
     </div>
 </form>
diff --git a/static/scripts/app/views/add-pub-repo.js b/static/scripts/app/views/add-pub-repo.js
index 7707765e68..91a6d21c72 100644
--- a/static/scripts/app/views/add-pub-repo.js
+++ b/static/scripts/app/views/add-pub-repo.js
@@ -16,7 +16,7 @@ define([
         template: _.template($('#add-pubrepo-popup-tmpl').html()),
 
         initialize: function(pubRepos) {
-            this.$el.html(this.template()).modal({});
+            this.$el.html(this.template()).modal({focus:false});
             $('#simplemodal-container').css({'width':'auto', 'height':'auto'});
 
             this.$table = this.$('table');
diff --git a/static/scripts/app/views/add-pubrepo-item.js b/static/scripts/app/views/add-pubrepo-item.js
index c99e98b366..5025f7a7c6 100644
--- a/static/scripts/app/views/add-pubrepo-item.js
+++ b/static/scripts/app/views/add-pubrepo-item.js
@@ -25,9 +25,8 @@ define([
         },
 
         select: function () {
-            var checkbox = this.$('.checkbox');
-            checkbox.toggleClass('checkbox-checked');
-            if (checkbox.hasClass('checkbox-checked')) {
+            var $checkbox = this.$('[type=checkbox]');
+            if ($checkbox.prop('checked')) {
                 this.model.set({'selected':true}, {silent:true});
             } else {
                 this.model.set({'selected':false}, {silent:true});
diff --git a/static/scripts/app/views/add-repo.js b/static/scripts/app/views/add-repo.js
index 1d841f44ad..17d4ba75f2 100644
--- a/static/scripts/app/views/add-repo.js
+++ b/static/scripts/app/views/add-repo.js
@@ -83,13 +83,12 @@ define([
 
         togglePasswdInput: function(e) {
             var $checkbox = $('#encrypt-switch');
-            var pwd_input = this.$('input[type="password"]');
+            var $pwd_input = this.$('input[type="password"]');
 
-            $checkbox.parent().toggleClass('checkbox-checked');
             if ($checkbox.prop('checked')) {
-                pwd_input.attr('disabled', false).removeClass('input-disabled');
+                $pwd_input.attr('disabled', false).removeClass('input-disabled');
             } else {
-                pwd_input.attr('disabled', true).addClass('input-disabled');
+                $pwd_input.attr('disabled', true).addClass('input-disabled');
             }
         }
 
diff --git a/static/scripts/app/views/dir.js b/static/scripts/app/views/dir.js
index 37da0ae1f3..f60f7a9d81 100644
--- a/static/scripts/app/views/dir.js
+++ b/static/scripts/app/views/dir.js
@@ -746,24 +746,23 @@ define([
             },
 
             select: function () {
-                var $el = this.$('th .checkbox');
-                $el.toggleClass('checkbox-checked');
+                var $el = this.$('th [type=checkbox]');
 
                 var dir = this.dir;
-                var all_dirent_checkbox = this.$('.checkbox');
+                var $all_dirent_checkbox = this.$('[type=checkbox]');
                 var $dirents_op = this.$('#multi-dirents-op');
 
                 var $curDirOps = this.$('#upload-file, #add-new-dir, #add-new-file, #share-cur-dir');
 
-                if ($el.hasClass('checkbox-checked')) {
-                    all_dirent_checkbox.addClass('checkbox-checked');
+                if ($el.prop('checked')) {
+                    $all_dirent_checkbox.prop('checked', true);
                     dir.each(function(model) {
                         model.set({'selected': true}, {silent: true});
                     });
                     $dirents_op.css({'display':'inline-block'});
                     $curDirOps.hide();
                 } else {
-                    all_dirent_checkbox.removeClass('checkbox-checked');
+                    $all_dirent_checkbox.prop('checked', false);
                     dir.each(function(model) {
                         model.set({'selected': false}, {silent: true});
                     });
diff --git a/static/scripts/app/views/dirent.js b/static/scripts/app/views/dirent.js
index dc7c552d32..814e627502 100644
--- a/static/scripts/app/views/dirent.js
+++ b/static/scripts/app/views/dirent.js
@@ -91,9 +91,8 @@ define([
         },
 
         select: function () {
-            var checkbox = this.$('.checkbox');
-            checkbox.toggleClass('checkbox-checked');
-            if (checkbox.hasClass('checkbox-checked')) {
+            var $checkbox = this.$('[type=checkbox]');
+            if ($checkbox.prop('checked')) {
                 this.model.set({'selected':true}, {silent:true}); // do not trigger the 'change' event.
             } else {
                 this.model.set({'selected':false}, {silent:true});
@@ -101,8 +100,13 @@ define([
 
             var dirView = this.dirView;
             var $dirents_op = dirView.$('#multi-dirents-op');
-            var toggle_all_checkbox = dirView.$('th .checkbox');
-            var checked_num = dirView.$('tr:gt(0) .checkbox-checked').length;
+            var $toggle_all_checkbox = dirView.$('th [type=checkbox]');
+            var checked_num = 0;
+            dirView.$('tr:gt(0) [type=checkbox]').each(function() {
+                if ($(this).prop('checked')) {
+                    checked_num += 1;
+                }
+            });
 
             var $curDirOps = dirView.$('#upload-file, #add-new-dir, #add-new-file, #share-cur-dir');
 
@@ -114,9 +118,9 @@ define([
                 $curDirOps.show();
             }
             if (checked_num == dirView.$('tr:gt(0)').length) {
-                toggle_all_checkbox.addClass('checkbox-checked');
+                $toggle_all_checkbox.prop('checked', true);
             } else {
-                toggle_all_checkbox.removeClass('checkbox-checked');
+                $toggle_all_checkbox.prop('checked', false);
             }
         },
 
diff --git a/static/scripts/app/views/share.js b/static/scripts/app/views/share.js
index b812893c29..a42009e8f2 100644
--- a/static/scripts/app/views/share.js
+++ b/static/scripts/app/views/share.js
@@ -68,9 +68,7 @@ define([
         },
 
         events: {
-            'mouseenter .checkbox-label': 'highlightCheckbox',
-            'mouseleave .checkbox-label': 'rmHighlightCheckbox',
-            'click .checkbox-orig': 'clickCheckbox',
+            'click [type="checkbox"]': 'clickCheckbox',
 
             // download link
             'submit #generate-download-link-form': 'generateDownloadLink',
@@ -95,19 +93,10 @@ define([
             'click #add-dir-group-share-item .submit': 'dirGroupShare'
         },
 
-        highlightCheckbox: function (e) {
-            $(e.currentTarget).addClass('hl');
-        },
-
-        rmHighlightCheckbox: function (e) {
-            $(e.currentTarget).removeClass('hl');
-        },
-
         clickCheckbox: function(e) {
-            var el = e.currentTarget;
-            $(el).parent().toggleClass('checkbox-checked');
+            var $el = $(e.currentTarget);
             // for link options such as 'password', 'expire'
-            $(el).closest('.checkbox-label').next().toggleClass('hide');
+            $el.closest('.checkbox-label').next().toggleClass('hide');
         },
 
         downloadLinkPanelInit: function() {