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

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

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

不要像这样检查更改监听器中可见复选框的值:

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"，您可以看到它们根据您的主复选框的用途进行选中和取消选中。