jQuery. How to uncheck all checkboxes except one (which was checked)

前端 未结 4 925
广开言路
广开言路 2021-02-07 03:57

I have html items, 4 example:

Checkbox
相关标签:
4条回答
  • 2021-02-07 04:44

    Another solution

    $('.foo').click(function(){     
          $('.foo').not(this).attr('checked', false);      
    });
    
    0 讨论(0)
  • 2021-02-07 04:46

    You can use radio button and group them by name attributes. If you have to do it with checkboxes then you can do it this way,

    Live Demo

    $('.foo').click(function(){     
          $('.foo').attr('checked', false);
          $(this).attr('checked', true);          
    });
    

    For dynamically generated html you need on that allows you to delegate the event with static parent, you can use document with you do not know static parent.

    $(document).on('click','.foo', function(){     
          $('.foo').attr('checked', false);
          $(this).attr('checked', true);          
    });
    

    Document could be replaced by static parent if it is known. e.g. if div contain dynamically generated has id parentdiv then you can have

    `$('#parentdiv').on('click','.foo', function(){`
    

    Edit

    Use prop instead of attr for properties checked, selected, or disabled as per documentation.

    As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

    0 讨论(0)
  • 2021-02-07 04:48

    jQuery V: 1.6 =<

    $( ".foo" ).change(function() {
        $('.foo').not(this).prop('checked', false);
    });
    
    0 讨论(0)
  • 2021-02-07 04:53

    Maybe this will help you:

    .siblings("input[type='checkbox']").attr("checked", true); 
    

    will select all the checkboxes except for the one that was clicked.

    $("input[type=checkbox]").on("click", function() {
    
      if ($(this).val() == "none") {
        
        $(this).siblings("input[type=checkbox]").attr('checked', false);
        
      } else {
        
        $(this).siblings("input[value=none]").attr('checked', false);
    
      }
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div>
    
      <input type="checkbox" id="worker-soft-eaglesoft" checked><label for="worker-soft-eaglesoft">&nbsp;Eaglesoft</label><br>
      <input type="checkbox" id="worker-soft-dentrix"><label for="worker-soft-dentrix">&nbsp;Dentrix</label><br>
      <input type="checkbox" id="worker-soft-softDent"><label for="worker-soft-softDent">&nbsp;Soft-Dent</label><br>
      <input type="checkbox" id="worker-soft-denticon"><label for="worker-soft-denticon">&nbsp;Denticon</label><br>
      <input type="checkbox" id="worker-soft-other"><label for="worker-soft-other">&nbsp;Other</label><br>
    
      <input type="checkbox" id="worker-soft-none" value="none">
      <label for="worker-soft-none">&nbsp;No Software Experience - Paper Records Only</label><br>
    </div>

    0 讨论(0)
提交回复
热议问题