jQuery：检查/取消选中DOM元素

Question

I've got the following script that gets executed via AJAX in Rails:

It appears that only the first specified option (unchecking) works, the part inside the else statements does not work!

<% if params[:type] == "switch" %>
    var obj = $('.<%= params[:name] %> a:not(.label) #myonoffswitch:checkbox');
    <% if params[params[:name]] %>
        obj.prop('checked', false);
    <% else %>
        obj.prop('checked', true);
    <% end %>
<% elsif params[:type] == "checkbox" %>
    <% if params[params[:name]] %>
        $('.<%= params[:name] %> a:not(.label)').remove();
        $('.<%= params[:name] %>').prepend("<a data-remote='true' href='/update?name=<%= params[:name] %>&amp;<%= params[:name] %>=true&amp;type=checkbox'><i class='icon ion-android-checkbox-outline-blank' tabindex='0'></i></a>");
        $('.<%= params[:name] %> a:not(.label) i').focus();
    <% else %>
        $('.<%= params[:name] %> a:not(.label)').remove();
        $('.<%= params[:name] %>').prepend("<a data-remote='true' href='/update?name=<%= params[:name] %>&amp;<%= params[:name] %>=false&amp;type=checkbox'><i class='icon ion-android-checkbox' tabindex='0'></i></a>");
        $('.<%= params[:name] %> a:not(.label) i').focus();
    <% end %>
<% end %>

DOM

      <div class="name flex">
        <a data-remote="true" href="/update?name=name&amp;name=false&amp;type=switch"><div class="onoffswitch">
          <input checked="" class="onoffswitch-checkbox" id="myonoffswitch" name="onoffswitch" type="checkbox">
          <label class="onoffswitch-label" for="myonoffswitch"></label>
        </div>
        </a>
        <div class="label">
          <a class="abc label" data-remote="true" href="/update?name=name&amp;name=false&amp;type=switch">ABC
          </a>
          <p class="abc labeltext">Lorem ipsum.</p>
        </div>
      </div>

      <div class="name1 flex"><a data-remote="true" href="/update?name=name1&amp;name1=true&amp;type=checkbox">
        <i class="icon ion-android-checkbox-outline-blank" tabindex="0"></i></a>

        <div class="label">
          <a class="abc label" data-remote="true" href="/update?name=name1&amp;name1=false&amp;type=checkbox">ABC
          </a>
          <p class="abc labeltext">Lorem ipsum.</p>
        </div>
      </div>

However, I noticed that only if a checkbox or a switch is checked it gets unchecked, and if it is unchecked it will not change it's appearance (the DOM).

What am I doing wrong?

Answer 1

You need to remove :checked selector . As of now you are only getting checked checkboxes

Use

var obj = $('.<%= params[:name] %> a:not(.label) #myonoffswitch:checkbox');

instead of

var obj = $('.<%= params[:name] %> a:not(.label) #myonoffswitch:checkbox:checked');