多个jQuery切换未正确更改

Question

I have 2 toggle buttons, like this:

  $(".ui.toggle" ).on( "click", function() { if (!$('#thetoggle').is(':checked')) { $('#thetoggle').prop('checked', true ); } else { $('#thetoggle').prop('checked', false); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="ui toggle checkbox"> <input id="thetoggle" value="false" name="ownplace" type="checkbox"> <label>&nbsp;</label> </div> <div class="ui toggle checkbox"> <input id="thetoggle" value="false" name="otherplace" type="checkbox"> <label>&nbsp;</label> </div> 

So when i click the second toggle, the first one changes the checked status, which it shouldn't do - I want them to change independently. I get why it isn't working, as I dont have any selectors for the second as this is the same as the first. However, I was wondering if there is a way to do this using some sort of easy selector which will work on all toggles in the future, with the ID of thetoggle

Answer 1

An id can only refer to one element, $('#thetoggle') will always return the first element with that id found in the DOM. You should use class instead, and in your event handler you can use:

$(this).find('.thetoggle`);

to get the child node. You could also remove class and id and just use tag type:

var checkbox = $(this).find('input[type=checkbox]');

Answer 2

Checkboxes are able to be checked independanty without any javascript:

 <div class="ui toggle checkbox"> <input class="thetoggle" value="false" name="ownplace" type="checkbox"> <label>&nbsp;</label> </div> <div class="ui toggle checkbox"> <input class="thetoggle" value="false" name="otherplace" type="checkbox"> <label>&nbsp;</label> </div> 

Although if you are looking for them to behave like radio buttons (ie only one can be checked at a time), you can try this (which does change the id's to classes):

 $(".thetoggle").change(function() { $(".thetoggle").prop('checked', false); $(this).prop('checked', true); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ui toggle checkbox"> <input class="thetoggle" value="false" name="ownplace" type="checkbox"> <label>&nbsp;</label> </div> <div class="ui toggle checkbox"> <input class="thetoggle" value="false" name="otherplace" type="checkbox"> <label>&nbsp;</label> </div>