How to solve the second failure of JQuery select/inverse selection

Recently, I encountered a problem in the project. When testing the select/unselect function, when the parent box is selected/unselected for the first time, the all-selected/unselected state of the sub-box can be synchronized, and then the parent box can be clicked. , the subframe becomes unresponsive. This article brings you an article to solve the problem of JQuery's full selection/inverse selection failing for the second time. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

The key to the general structure of the original code is as follows:

function selectAll(obj){
    $('input[name="xxx[]"]').attr("checked",obj.checked);
}

<input>全选

<input>子框<input>子框<input>子框<input>子框

Step 1: Try a positive wave:

function selectAll(obj){
   if(obj.checked) {
    $('input[name="xxx[]"]').attr("checked", true);
   } else {
    $('input[name="xxx[]"]').removeAttr("checked");
   }
}

Death ----- has no effect at all, discard it.

Step 2: After a quick search on the Internet, I found that this problem is relatively common. Among people who have encountered this problem, I should be thousands of miles away. I clicked on a few and looked at them. They basically said that using prop instead of attr can solve the problem. The solution is as follows:

However, the version used in the project is lower than 1.6 and I was told that the latest It is best not to change the version and discard it.

Step 3: There is no choice but to abandon JQuery... Try to use native js writing method. The code is as follows:

function selectAll(obj){
 var xxx = document.getElementsByName("xxx[]");
  if(obj.checked) {
   for(var i = 0;i <p>Test it and solve it smoothly. In fact, it is a small problem, but it gave me some inspiration. I cannot be limited to one box. If I think about the problem from another angle, I can often solve the problem better. </p><p>Related recommendations: <br></p><p><a href="http://www.php.cn/js-tutorial-382290.html" target="_self">js implementation of selecting all and unselecting</a></p><p><a href="http://www.php.cn/js-tutorial-379751.html" target="_self">js method of selecting all check boxes and inverting the selection</a></p><p><a href="http://www.php.cn/js-tutorial-379502.html" target="_self">Js implements front-end full selection and reverse selection</a></p>

The above is the detailed content of How to solve the second failure of JQuery select/inverse selection. For more information, please follow other related articles on the PHP Chinese website!