Question

我想制作多个用户协议，用户必须逐个检查复选框。当用户选中内容编号1时，内容编号2将移至列表顶部，内容编号1将从列表中删除。

所以，问题是，当用户选中复选框时，内容不会移动。

选中复选框后，有人可以帮助我制作移动内容。

这是我的剧本：

<script>
    $(document).ready(function(){
    $("#form").validate();
  });
function showAmanat1(){
    if(document.form.amanat1.checked)
         { document.form.amanat2.disabled=false; } 
    else { for (var i=2; i<14; i++)             
           { var amanatx="amanat"+i;
                 document.forms.form[amanatx].checked=false;
                 document.forms.form[amanatx].disabled=true;
           }
         }
}
function showAmanat2(){     
    if(document.form.amanat2.checked)
         {  document.form.amanat3.disabled=false} 
    else { for (var i=3; i<14; i++)             
           { var amanatx="amanat"+i;
                 document.forms.form[amanatx].checked=false;
                 document.forms.form[amanatx].disabled=true;
           }
         }
} 
function showAmanat3(){     
    if(document.form.amanat3.checked)
         {  document.form.amanat4.disabled=false} 
    else { for (var i=4; i<14; i++)             
           { var amanatx="amanat"+i;
                 document.forms.form[amanatx].checked=false;
                 document.forms.form[amanatx].disabled=true;
           }
         }
}  
function showAmanat4(){     
    if(document.form.amanat4.checked)
         {  document.form.amanat5.disabled=false} 
    else { for (var i=5; i<14; i++)             
           { var amanatx="amanat"+i;
                 document.forms.form[amanatx].checked=false;
                 document.forms.form[amanatx].disabled=true;
           }
         }
}  
function showAmanat5(){     
    if(document.form.amanat5.checked)
         {  document.form.amanat6.disabled=false} 
    else { for (var i=6; i<14; i++)             
           { var amanatx="amanat"+i;
                 document.forms.form[amanatx].checked=false;
                 document.forms.form[amanatx].disabled=true;
           }
         }
} 
function showAmanat6(){     
    if(document.form.amanat6.checked)
         {  document.form.amanat7.disabled=false} 
    else { for (var i=7; i<14; i++)             
           { var amanatx="amanat"+i;
                 document.forms.form[amanatx].checked=false;
                 document.forms.form[amanatx].disabled=true;
           }
         }
} 
function showAmanat7(){     
    if(document.form.amanat7.checked)
         {  document.form.amanat8.disabled=false} 
    else { for (var i=8; i<14; i++)             
           { var amanatx="amanat"+i;
                 document.forms.form[amanatx].checked=false;
                 document.forms.form[amanatx].disabled=true;
           }
         }
} 
function showAmanat8(){     
    if(document.form.amanat8.checked)
         {  document.form.amanat9.disabled=false} 
    else { for (var i=9; i<14; i++)             
           { var amanatx="amanat"+i;
                 document.forms.form[amanatx].checked=false;
                 document.forms.form[amanatx].disabled=true;
           }
         }
} 
function showAmanat9(){     
    if(document.form.amanat9.checked)
         {  document.form.amanat10.disabled=false} 
    else { for (var i=10; i<14; i++)                
           { var amanatx="amanat"+i;
                 document.forms.form[amanatx].checked=false;
                 document.forms.form[amanatx].disabled=true;
           }
         }
} 
function showAmanat10(){    
    if(document.form.amanat10.checked)
         {  document.form.amanat11.disabled=false} 
    else { for (var i=11; i<14; i++)                
           { var amanatx="amanat"+i;
                 document.forms.form[amanatx].checked=false;
                 document.forms.form[amanatx].disabled=true;
           }
         }
} 
function showAmanat11(){    
    if(document.form.amanat11.checked)
         {  document.form.amanat12.disabled=false} 
    else { for (var i=12; i<14; i++)                
           { var amanatx="amanat"+i;
                 document.forms.form[amanatx].checked=false;
                 document.forms.form[amanatx].disabled=true;
           }
         }
} 
function showAmanat12(){    
    if(document.form.amanat12.checked)
         {  document.form.amanat13.disabled=false} 
    else { for (var i=13; i<14; i++)                
           { var amanatx="amanat"+i;
                 document.forms.form[amanatx].checked=false;
                 document.forms.form[amanatx].disabled=true;
           }
         }
}
function showPernyataan(){  
    if(document.form.amanat13.checked)
         { document.form.c1.disabled=false;
           document.form.c2.disabled=false;} 
    else { document.form.c1.checked=false; document.form.c2.checked=false;
           document.form.c1.disabled=true; document.form.c2.disabled=true; }
} 
</script>
<form id="form" name="form" method='POST'> 
<tr>
       <td align="justify" colspan="2"> 
        <ol id="point">
          <li>If this checkbox is checked, then the next checkbox should be appeared in top of list and the checked one is in bottom of list or dissapear.
          </li><label class='agreement_label'><strong>I Agree <span class='red_style'>*)</span></strong><input name="amanat1" type="checkbox" class="required agreement" onchange="showAmanat1()"/></label>
          <li>dummy for 2 </li><label class='agreement_label'><strong>I Agree<span class='red_style'>*)</span></strong><input name='amanat2' type='checkbox' class='required agreement' onchange='showAmanat2()' disabled="disabled"/></label>
<li>dummy for 3</li><label class='agreement_label'><strong>I Agree <span class='red_style'>*)</span></strong><input name='amanat3' type='checkbox' class='required agreement' onchange='showAmanat3()'disabled="disabled"/></label>
<li>dummy for 4</li><label class='agreement_label'><strong>I Agree <span class='red_style'>*)</span></strong><input name='amanat4' type='checkbox' class='required agreement' onchange='showAmanat4()' disabled="disabled"/></label>
<li>dummy for 5</li><label class='agreement_label'><strong>I Agree <span class='red_style'>*)</span></strong><input name='amanat5' type='checkbox' class='required agreement' onchange='showAmanat5()' disabled="disabled"/></label>
<li>dummy for 6</li><label class='agreement_label'><strong>I Agree <span class='red_style'>*)</span></strong><input name='amanat6' type='checkbox' class='required agreement' onchange='showAmanat6()' disabled="disabled"/></label>
<li>dummy for 7</li><label class='agreement_label'><strong>I Agree<span class='red_style'>*)</span></strong><input name='amanat7' type='checkbox' class='required agreement' onchange='showAmanat7()' disabled="disabled"/></label>
<li>dummy for 8</li><label class='agreement_label'><strong>I Agree <span class='red_style'>*)</span></strong><input name='amanat8' type='checkbox' class='required agreement' onchange='showAmanat8()' disabled="disabled"/></label>
<li>dummy for 9</li><label class='agreement_label'><strong>I Agree<span class='red_style'>*)</span></strong><input name='amanat9' type='checkbox' class='required agreement' onchange='showAmanat9()' disabled="disabled"/></label>
<li>dummy for 10</li><label class='agreement_label'><strong>I Agree <span class='red_style'>*)</span></strong><input name='amanat10' type='checkbox' class='required agreement' onchange='showAmanat10()' disabled="disabled"/></label>
<li>dummy for 11</li><label class='agreement_label'><strong>I Agree <span class='red_style'>*)</span></strong><input name='amanat11' type='checkbox' class='required agreement' onchange='showAmanat11()' disabled="disabled"/></label>
<li>dummy for 12</li><label class='agreement_label'><strong>I Agree<span class='red_style'>*)</span></strong><input name='amanat12' type='checkbox' class='required agreement' onchange='showAmanat12()' disabled="disabled"/></label>
<li>dummy for 13</li><label class='agreement_label'><strong>I Agree <span class='red_style'>*)</span></strong><input name='amanat13' type='checkbox' class='required agreement' onchange='showPernyataan()' disabled="disabled"/></label>                   
        </ol>
      </td>
    </tr>    
</table>     
</form>
</div>

并且继承我的小提琴 https://jsfiddle.net/a6ea9yhL/5/

Answer 1

隐藏元素很容易

我建议你将每个点放在一个范围内，然后将该范围设为如下所示：

<span id="amanat2">
  <li>dummy for 2 </li>
  <label class='agreement_label'>
    <strong>I Agree<span class='red_style'>*)</span></strong>
    <input name='amanat2' type='checkbox' class='required agreement' onchange='showAmanat2()' disabled="disabled"/>
  </label>
</span>

然后在if函数块中添加

document.getElementById('amanat2').style.display = 'none'; // chnage the id

Answer 2

您的代码策略必须改变，而不是修复！为什么不在每次用户检查项目时重新排序列表，例如，使用特定类：“vergin”启动所有复选框作为列表元素，并且在每次单击时，根据函数重新排序列表：。前置（）请点击链接了解更多详情：

jQuery reorder list items based on class

Answer 3

试试这个脚本。此脚本会将单击列表移动到列表底部

  <ul>
    <li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
<li id="5">5</li>
<li id="6">6</li>
<li id="7">7</li>
</ul>

$("li").click(function(){
  $(this).appendTo('ul');
});

希望这会对你有所帮助。

Answer 4

看起来这就是你想要的

function clickCheckBox(elem){
  document.getElementById('agreement').appendChild(elem);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="agreement">
  <li onclick="clickCheckBox(this);">Agreement * <input type="checkbox" class="checkbox-item" /></li>
  <li onclick="clickCheckBox(this);">Agreement * <input type="checkbox" class="checkbox-item" /></li>
  <li onclick="clickCheckBox(this);">Agreement * <input type="checkbox" class="checkbox-item" /></li>
  <li onclick="clickCheckBox(this);">Agreement * <input type="checkbox" class="checkbox-item" /></li>
  <li onclick="clickCheckBox(this);">Agreement * <input type="checkbox" class="checkbox-item" /></li>
  <li onclick="clickCheckBox(this);">Agreement * <input type="checkbox" class="checkbox-item" /></li>
</ol>
<div class="div-1"></div>

PHP - 选中复选框后，将内容移动到列表底部

4 个答案: