Home > Back-end >  Jquery implementation checkbox selection and don't choose
Jquery implementation checkbox selection and don't choose

Time:09-17

Set selection and the selection:
1. Basic functions:
Requirements: click on the selection, the selection buttons check box under all selected, otherwise, all don't choose
According to the ID selection button, back off function within the binding click events, events in $(" # check input ") that is the use of the hierarchy selector to get all the checkboxes prop and give him the binding event
With two parameters method is used the first parameter is the checked attribute the second parameter of true or false. Note: the check boxes for many kinds of this only demonstrates one way!
$(function () {
$(" # che_quan "). Click (function () {
$(" # check input "). Prop (" checked ", $(" # che_quan "), is (" : checked "));
});
});
2. Strengthen
Requirements: when one of the check box is not selected, all button is not selected, when the check box full selected the selection button and select the
Note that $(". Chec: checked "). The length; That using class selectors to select all of the class of the same check box, the direct connect (attention: checked). Chec: checked the middle don't have space space system will automatically identify he take subset
$(function () {
$(" # che_quan "). Click (function () {
$(" # check input "). Prop (" checked ", $(" # che_quan "), is (" : checked "));
});
$(" # check input "). Click (function () {
Var len=$(". Chec ".) length;
Var sum=$(". Chec: checked "). The length;
If (len==sum) {
$(" # che_quan "). Prop (" checked ", true);
} else {
$(" # che_quan "). Prop (" checked ", false);
}
})
});
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
 

<script>
$(function () {
$(" # che_quan "). Click (function () {
$(" # check input "). Prop (" checked ", $(" # che_quan "), is (" : checked "));
});
$(" # check input "). Click (function () {
Var len=$(". Chec ".) length;
Var sum=$(". Chec: checked "). The length;
If (len==sum) {
$(" # che_quan "). Prop (" checked ", true);
} else {
$(" # che_quan "). Prop (" checked ", false);
}
})
});
</script>


$Title $& lt;/title> <br/></head> <br/><body> <br/><Input type="checkbox" id="che_quan"/& gt; All <br/><Div id="check" & gt; <br/><Input type="checkbox"/& gt; <br/><Input type="checkbox"/& gt; <br/><Input type="checkbox"/& gt; <br/><Input type="checkbox"/& gt; <br/></div> <br/></body> <br/></html> <br/> </div> <div class="th_page th_page_color"></div> <div class="umCopyright"> <p>Page link:<a href="/Backend/5666.html" target="_blank" style="color:#999">https//www.codepudding.com/Backend/5666.html</a></p> </div> <div class="detail-arr"> <div class="detail-arr-left">Prev:<a href='/Backend/5665.html'>The FTP proxy server</a></div> <div class="detail-arr-right">Next:<a href='/Backend/5667.html'>java</a></div> </div> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="hot-tags neitags"> <ul> <li><i class="iconfont icon-x-tags"></i> Tags:  </li> <a href='/e/tags/?tagname=Web+development' target='_blank'>Web development</a> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="xiangguan"> <ul class="msg msghead"> <li class="tbname">Related</li> </ul> <ul> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="flinks"> <ul> <li><i class="iconfont icon-x-tags"></i> Links:  </li> <li class="liflinks"><a target="_blank" href="/" title="CodePudding">CodePudding</a></li> </ul> </div> </div> </div> </div> <div class="footer"> <p><span style="font-size:16px;color:#666;font-weight: bold">About Us:</span>  <a href="https://www.codepudding.com/contact.html">Contact Us</a>      <a href="https://www.codepudding.com/service.html">Terms of Service</a>      <a href="https://www.codepudding.com/privacy.html"> Privacy Policy</a></p> <p class="foot_info">Copyright © 2010-2023,Powered By <a href="/" target="_blank">CodePudding</a> </p> </div> <script type="text/javascript" src="/skin/code/tianhu.js"></script> </body></html>