Question

当主复选框属性被选中为TRUE时，脚本应该检查所有隐藏的复选框。如果未选中，或者用户选中/取消选中，则应对隐藏属性应用相同的值。

它可以正常工作90％，但似乎在某些情况下（不确定如何）它不起作用，并且一些结果出现在用户将主复选框为TRUE但其他所有为FALSE，反之亦然。

为什么会这样？

 <script>      
             $(function() {
             var marketingMAIN= $("input[type='checkbox'][name='marketingMAIN']");
             var marketingPhone = $("input[type='hidden'][name='marketingPhone']");
             var marketingRobo = $("input[type='hidden'][name='marketingRobo']");
             var marketingSMS = $("input[type='hidden'][name='marketingSMS']");
             var marketingEmail = $("input[type='hidden'][name='marketingEmail']");
             var marketingIM = $("input[type='hidden'][name='marketingIM']");
             var marketingPush = $("input[type='hidden'][name='marketingPush']");
             var marketingPaperMail = $("input[type='hidden'][name='marketingPaperMail']");

             marketingMAIN.on('change', function()
               {
               if ($(this).val() == "TRUE")  {
                 marketingPhone.prop('checked',true);
                 marketingPhone.val('TRUE');
                 marketingRobo.prop('checked',true);
                 marketingRobo.val('TRUE');
                 marketingSMS.prop('checked',true);
                 marketingSMS.val('TRUE');
                 marketingEmail.prop('checked',true);
                 marketingEmail.val('TRUE');
                 marketingIM.prop('checked',true);
                 marketingIM.val('TRUE');
                 marketingPush.prop('checked',true);
                 marketingPush.val('TRUE');
                 marketingPaperMail.prop('checked',true);
                 marketingPaperMail.val('TRUE');
               } else {
                 marketingPhone.prop('checked',false);
                 marketingPhone.val('FALSE');
                 marketingRobo.prop('checked',false);
                 marketingRobo.val('FALSE');
                 marketingSMS.prop('checked',false);
                 marketingSMS.val('FALSE');
                 marketingEmail.prop('checked',false);
                 marketingEmail.val('FALSE');
                 marketingIM.prop('checked',false);
                 marketingIM.val('FALSE');
                 marketingPush.prop('checked',false);
                 marketingPush.val('FALSE');
                 marketingPaperMail.prop('checked',false);
                 marketingPaperMail.val('FALSE');
               }
             });
             });
          </script>

隐藏属性标记如下：

           <input type="hidden" name="marketingPhone" value=""/>
           <input type="hidden" name="marketingRobo" value=""/>
           <input type="hidden" name="marketingSMS" value=""/>
           <input type="hidden" name="marketingEmail" value=""/>  
           <input type="hidden" name="marketingIM" value=""/>
           <input type="hidden" name="marketingPush" value=""/>
           <input type="hidden" name="marketingPaperMail" value=""/>

Answer 1

除非您专门更改，否则复选框的值不会更改。尝试使用this answer中的is()。

而不是像这样检查更改侦听器中的可见复选框值：

if ($(this).val() == "TRUE")  {

检查其checked属性：

if ($(this).is(":checked")) {

这是一个有效的例子：

$(function() {
  var marketingMAIN = $("input[type='checkbox'][name='marketingMAIN']");
  var marketingPhone = $("input[name='marketingPhone']");
  var marketingRobo = $("input[name='marketingRobo']");
  var marketingSMS = $("input[type='hidden'][name='marketingSMS']");
  var marketingEmail = $("input[type='hidden'][name='marketingEmail']");
  var marketingIM = $("input[type='hidden'][name='marketingIM']");
  var marketingPush = $("input[type='hidden'][name='marketingPush']");
  var marketingPaperMail = $("input[type='hidden'][name='marketingPaperMail']");

  marketingMAIN.on('change', function() {
    if ($(this).is(":checked")) {
      marketingPhone.prop('checked', true);
      marketingPhone.val('TRUE');
      marketingRobo.prop('checked', true);
      marketingRobo.val('TRUE');
      marketingSMS.prop('checked', true);
      marketingSMS.val('TRUE');
      marketingEmail.prop('checked', true);
      marketingEmail.val('TRUE');
      marketingIM.prop('checked', true);
      marketingIM.val('TRUE');
      marketingPush.prop('checked', true);
      marketingPush.val('TRUE');
      marketingPaperMail.prop('checked', true);
      marketingPaperMail.val('TRUE');
    } else {
      marketingPhone.prop('checked', false);
      marketingPhone.val('FALSE');
      marketingRobo.prop('checked', false);
      marketingRobo.val('FALSE');
      marketingSMS.prop('checked', false);
      marketingSMS.val('FALSE');
      marketingEmail.prop('checked', false);
      marketingEmail.val('FALSE');
      marketingIM.prop('checked', false);
      marketingIM.val('FALSE');
      marketingPush.prop('checked', false);
      marketingPush.val('FALSE');
      marketingPaperMail.prop('checked', false);
      marketingPaperMail.val('FALSE');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="marketingMAIN" value="" />
<input type="hidden" name="marketingPhone" value="" />
<input type="hidden" name="marketingRobo" value="" />
<input type="hidden" name="marketingSMS" value="" />
<input type="hidden" name="marketingEmail" value="" />
<input type="hidden" name="marketingIM" value="" />
<input type="hidden" name="marketingPush" value="" />
<input type="hidden" name="marketingPaperMail" value="" />

将type="hidden"中的任意复选框更改为type="checkbox"，您可以根据主要复选框的内容查看和取消选中这些复选框。

jQuery复选框脚本给出奇怪的结果

1 个答案: