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"，您可以看到它们选中和取消选中，具体取决于您的主复选框的功能。