Categories

:checked Selector

Categories: Form

jQuery(':checked')

Description: Matches all elements that are checked.

  • jQuery(':checked')

    version added: 1.0

The :checked selector works for checkboxes and radio buttons. For select elements, use the :selected selector.

  • Finds all input elements that are checked.

    HTML:
    
    <form>
      <p>
        <input type="checkbox" name="newsletter" checked="checked" value="Hourly" />
    
        <input type="checkbox" name="newsletter" value="Daily" />
        <input type="checkbox" name="newsletter" value="Weekly" />
    
        <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
        <input type="checkbox" name="newsletter" value="Yearly" />
      </p>
    </form>
    <div></div>
    
    CSS:
    
      div { color:red; }
      
    Code:
    
    function countChecked() {
      var n = $("input:checked").length;
      $("div").text(n + (n <= 1 ? " is" : " are") + " checked!");
    }
    countChecked();
    $(":checkbox").click(countChecked);
    
  • HTML:
    
    <form>
      <div>
        <input type="radio" name="fruit" value="orange" id="orange">
        <label for="orange">orange</label>
      </div>
      <div>
        <input type="radio" name="fruit" value="apple" id="apple">
        <label for="apple">apple</label>
      </div>
      <div>
        <input type="radio" name="fruit" value="banana" id="banana">
        <label for="banana">banana</label>
      </div>
      <div id="log"></div>
    </form>
    
    CSS:
    
    input, label { line-height: 1.5em; }
    
    Code:
    
    $("input").click(function() {
      $("#log").html( $(":checked").val() + " is checked!" );
    });