The third State of the "translation" checkbox

The checkbox has only two values: checked (checked) or unchecked (unchecked). It can have any value, but the checkbox's value can only be checked or unchecked when the form is submitted. Its default value is unchecked, which you can control in HTML:

<!--Default to unchecked -<inputtype= "checkbox"><!--Default to checked, XHTML -<inputtype= "checkbox"checked= "Checked" /><!--Default to checked, HTML5 -<inputtype= "checkbox"checked>

Visually, the checkbox has three states: checked, unchecked, indeterminate (indeterminate). It looks just like this:

A checkbox for the indeterminate state should be noted: You cannot set the checkbox's status to indeterminate in HTML. Because there is no indeterminate attribute in HTML, you can set it through JavaScript scripts

var checkbox = document.getElementById ("Some-checkbox"); checkbox.indeterminate = true;

or set it up with jquery.

true // prop is JQuery 1.6+

The indeterminate state of the checkbox is only visually, and its value is still only checked or unchecked, which means that the true value of the checkbox in the indeterminate state is only more friendly on the user interface!

The checkbox for the indeterminate state looks different in different browsers and is the look of opera 11.50 under the Mac:

Case

The main reason I am writing this article is that I have a useful case: in a nested checkbox, each checkbox may have many sub-checkboxes, and if all sub-checkboxes are selected, it should also be selected, and if no Child checkbox is selected, It is also unchecked; If a subset of the sub-checkboxes is selected, it should be the indeterminate state (in this case, a symbol of the partial child element selected).

Full Demo (the original author's demo is a bit of a problem, here I made a simplified version)

<! DOCTYPE html>$(function() {    $(' Input[type= ' checkbox "] '). Click (function(e) {varobj = $ ( This);        SetState (obj); functionsetState (oinput) {varState = Oinput.prop ("Checked"), this=Oinput, Alllen= This.closest ("ul"). Children ("Li")). Length, Checkedlen= This.closest ("ul"). Children ("Li"). Children ("input:checked"). length; Console.log ("state =" +State ) Console.log ("Siblings =" +Alllen) Console.log ("Checkedlen =" +Checkedlen)if(Alllen = = = Checkedlen && checkedlen > 0) {oinput.closest ("UL"). Closest ("Li"). Children ("input").). Prop ({checked:true, indeterminate:false                })            }Else if(Alllen!== checkedlen && checkedlen > 0) {oinput.closest ("UL"). Closest ("Li"). Children ("input").). Prop ({checked:false, indeterminate:true                })            }Else if(Checkedlen = = 0) {oinput.closest ("UL"). Closest ("Li"). Children ("input").). Prop ({checked:false, indeterminate:false                })            }        }    });});</script> for= "Tall" >tall things</label> <ul> <li> < Input type= "checkbox" Name= "Tall-1" id= "Tall-1" > <label for= "Tall-1" >Buildings</label> </li> <li> <input type= "checkbox" Name= "Tall-2" id= "Tall-2" > <label for= "Tall-2" >Giants</label> </li> <li> <input Typ e= "checkbox" Name= "tall-3" id= "tall-3" > <label for= "Tall-3" >two sandwiches</label> </li> </ul> </li> &lt ;li> <input type= "checkbox" Name= "Short" id= "short" > <label for= "Short" >short things</label> <ul> <li> &L T;input type= "checkbox" Name= "Short-1" id= "short-1" > <label for= "Short-1" >Smurfs</label> </li> <li> <input ty pe= "checkbox" Name= "Short-2" id= "short-2" > <label for= "Short-2" >Mushrooms</label> </li> <li> <input type= "checkbox" Name= "short-3" id= "short-3" > <label for= "Short-3" >one sandwich</label> </li> </ul> </li> </ul&        Gt </div> </body>View Code
This article by the blog Garden Wang Meijian translation from: https://css-tricks.com/indeterminate-checkboxes/, the level is limited, if the translation is not the place to welcome the friend criticism!
The third State of the "translation" checkbox