Why does not want to set the checked attribute when selecting a checkbox?

As a result, the display of additional content does not work when the checkbox is selected:

 $(document).ready(function() { $("#public").change(function() { if ($(this).attr("checked")) { $('#hide').fadeIn().show(); return; } else { $('#hide').fadeOut(300); } }); }) 
 .ajax_form.af_example { width: 100%;} .control-group { margin: 10px 0;} 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="container"> <div class="row"> <h1>Π—Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ Ρ„ΠΎΡ€ΠΌΡƒ</h1> </div> </div> <input type="checkbox" name="public" id="public">Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΎΠΏΡ†ΠΈΡŽ <div id="hide" style="display:none;"> ОписаниС Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΎΠΏΡ†ΠΈΠΈ </div>

  • 2
    Questions asking for help with debugging (β€œ why does this code not work? ”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. See How to create a minimal, complete, reproducible example . - Grundy
  • one
    As a punishment for the hasty answer I gave me, I fixed the question: I moved the code from the external left site here to the snippet. - Sergiks
  • Thanks)) From now on I will be more attentive - Batyabest

4 answers 4

User actions do not change the attributes of the html element, but change its properties, to access them, you can either use the prop () method

 $(document).ready(function() { $("#public").change(function() { if ($(this).prop("checked")) { $('#hide').fadeIn().show(); return; } else { $('#hide').fadeOut(300); } }); }) 
 .ajax_form.af_example { width: 100%;} .control-group { margin: 10px 0;} 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="container"> <div class="row"> <h1>Π—Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ Ρ„ΠΎΡ€ΠΌΡƒ</h1> </div> </div> <input type="checkbox" name="public" id="public">Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΎΠΏΡ†ΠΈΡŽ <div id="hide" style="display:none;"> ОписаниС Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΎΠΏΡ†ΠΈΠΈ </div>

Or directly check this property with this , since it refers to the element on which the event is hung

 $(document).ready(function() { $("#public").change(function() { if (this.checked) { $('#hide').fadeIn().show(); return; } else { $('#hide').fadeOut(300); } }); }) 
 .ajax_form.af_example { width: 100%;} .control-group { margin: 10px 0;} 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="container"> <div class="row"> <h1>Π—Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ Ρ„ΠΎΡ€ΠΌΡƒ</h1> </div> </div> <input type="checkbox" name="public" id="public">Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΎΠΏΡ†ΠΈΡŽ <div id="hide" style="display:none;"> ОписаниС Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΎΠΏΡ†ΠΈΠΈ </div>

  • By the way, here is the difference in the versions below jquery 1.6 and higher, and the method itself .checked . Is your example return required? - Jean-Claude
  • @ Jean-Claude, no, return is optional, the code was copied from the answer and just replaced the condition that was checked. since return in this case does not affect the execution flow in any way, it can be either removed or left. - Grundy
  • And tell me, if there are several checkboxes - how to connect each of them with their hidden block? - Batyabest
  • @Batyabest, depends on the markup, and what is meant by linking - Grundy
  • one
    @Batyabest, if exactly one after another: <input type="checkbox"/><div class="hide"> Then you can use jquery.next : $(this).next(/*здСсь ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ сСлСктор, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ .hide*/) - this expression will find the desired element after the input, and you should use it instead of $('#hide') - Grundy

Instead of .attr() use .prop() :

 $(document).ready(function() { $("#public").change(function() { if ($(this).prop("checked")) { $('#hide').fadeIn().show(); return; } else { $('#hide').fadeOut(300); } }); }) 
 .ajax_form.af_example { width: 100%;} .control-group { margin: 10px 0;} 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="container"> <div class="row"> <h1>Π—Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ Ρ„ΠΎΡ€ΠΌΡƒ</h1> </div> </div> <input type="checkbox" name="public" id="public">Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΎΠΏΡ†ΠΈΡŽ <div id="hide" style="display:none;"> ОписаниС Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΎΠΏΡ†ΠΈΠΈ </div>

  • one
    I don’t even know whether to add or mark as not the answer :-D - Grundy

You are trying to check the checkbox with the $(this).attr("checked") construct, which returns undefined . Use to check $(this).is(':checked') (or $(this).prop('checked') ) and everything will turn out:

 $("#public").change(function(){ if ($(this).is(':checked')) { $('#hide').fadeIn().show(); } else { $('#hide').fadeOut(300); } });
  • one
    it's better to check the property and not the attribute, I meant jquery.prop - Grundy
  • @Grundy agree. Although I still constantly use is (): D - alenkins
  • well, the selector is passed to is, so prop not applicable in all cases when you can use is :-) - Grundy

for checked it is necessary to use the .prop() method

  if ($(this).prop("checked")) {. . .

This is where the difference between attr and prop is described in detail: https://stackoverflow.com/questions/5874652/prop-vs-attr

  • it would also be worthwhile to insert the main differences in the answer itself - Grundy