Question

首先，对于这个模糊的问题感到抱歉，我不知道该怎么说。我的问题最好用一个例子说明。

我正在使用带有几个复选框的bootstrap下拉菜单。我使用了一些很好的FontAwesome图标来改变它们的外观。但是，当我尝试使用jQuery对这些复选框的状态执行某些操作时，第一次检查/取消选中似乎有效，但任何后续切换（检查/取消选中）都无效...

＆＃13;

$('.js-inputhit').click(function() {
  if (this === event.target) {
    $(this).find(':input').click();
  }
});
$('.js-inputhit :input').click(function(e) {
  e.stopPropagation();
});

$('.selectchat_all').click(function() {
  $('.selectchat_active').attr('checked', false);
  $('#chat1, #chat2, #chat3, #chat4').attr('checked', true);
});
$('.selectchat_active').click(function() {
  $('.selectchat_all').attr('checked', false);
  $('#chat1, #chat2, #chat3, #chat4').attr('checked', false);
});

＆＃13;

/*Adding custom checkbox icons*/

label {
  position: relative;
  padding-left: 20px;
  cursor: pointer;
}
label:before,
label:after {
  font-family: FontAwesome;
  font-size: 14px;
  /*absolutely positioned*/
  position: absolute;
  top: 0;
  left: 0;
}
label:before {
  content: '\f096';
  /*unchecked*/
}
label:after {
  content: '\f046';
  /*checked*/
  /*checked icon will be hidden by default by using 0 max-width and overflow hidden*/
  max-width: 0;
  overflow: hidden;
  opacity: 0.5;
  /*CSS3 transitions for animated effect*/
  transition: all 0.35s;
}
/*hiding the original checkboxes*/

input[type="checkbox"] {
  display: none;
}
/*when the user checks the checkbox the checked icon will animate in*/

input[type="checkbox"]:checked + label:after {
  max-width: 25px;
  /*an arbitratry number more than the icon's width*/
  opacity: 1;
  /*for fade in effect*/
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<input type="checkbox" name="chat1" id="chat1" checked/>
<label for="chat1" style="font-weight: normal; margin-bottom: 0px;">DreamhackCS</label>
<br>

<input type="checkbox" name="chat2" id="chat2" />
<label for="chat2" style="font-weight: normal; margin-bottom: 0px;">IzakOOO</label>
<br>

<input type="checkbox" name="chat3" id="chat3" />
<label for="chat3" style="font-weight: normal; margin-bottom: 0px;">Nightblue3</label>
<br>

<input type="checkbox" name="chat4" id="chat4" />
<label for="chat4" style="font-weight: normal; margin-bottom: 0px;">imaqtpie</label>
<br><br>

<input type="checkbox" name="active" class="selectchat_active" id="active" />
<label for="active" style="font-weight: normal; margin-bottom: 0px;">Check none</label>
<br>

<input type="checkbox" name="all" class="selectchat_all" id="all"/>
<label for="all" style="font-weight: normal; margin-bottom: 0px;">Check all</label>

＆＃13;

此示例中的问题：点击＆＃34;全部检查＆＃34;检查所有4个频道。点击＆＃34;不检查＆＃34;取消所有这些。（到现在为止还挺好）。然而，在那之后，＆＃34;检查全部＆＃34;不再有效。它不再检查4个通道。＆＃34;不检查＆＃34;仍然取消所有这些（如果你手动检查它们），但是＆＃34;检查全部＆＃34;不再有效......

有人能找到我的问题:)？非常感谢你的帮助。

Answer 1

使用.prop（）代替.attr（）

attr（）仅更新实际的DOM树

有关详细信息，请参阅http://api.jquery.com/prop/或this answer

＆＃13;

$('.js-inputhit').click(function() {
  if (this === event.target) {
    $(this).find(':input').click();
  }
});
$('.js-inputhit :input').click(function(e) {
  e.stopPropagation();
});

$('.selectchat_all').click(function() {
  $('.selectchat_active').prop('checked', false);
  $('#chat1, #chat2, #chat3, #chat4').prop('checked', true);
});
$('.selectchat_active').click(function() {
  $('.selectchat_all').prop('checked', false);
  $('#chat1, #chat2, #chat3, #chat4').prop('checked', false);
});

＆＃13;

/*Adding custom checkbox icons*/

label {
  position: relative;
  padding-left: 20px;
  cursor: pointer;
}
label:before,
label:after {
  font-family: FontAwesome;
  font-size: 14px;
  /*absolutely positioned*/
  position: absolute;
  top: 0;
  left: 0;
}
label:before {
  content: '\f096';
  /*unchecked*/
}
label:after {
  content: '\f046';
  /*checked*/
  /*checked icon will be hidden by default by using 0 max-width and overflow hidden*/
  max-width: 0;
  overflow: hidden;
  opacity: 0.5;
  /*CSS3 transitions for animated effect*/
  transition: all 0.35s;
}
/*hiding the original checkboxes*/

input[type="checkbox"] {
  display: none;
}
/*when the user checks the checkbox the checked icon will animate in*/

input[type="checkbox"]:checked + label:after {
  max-width: 25px;
  /*an arbitratry number more than the icon's width*/
  opacity: 1;
  /*for fade in effect*/
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<input type="checkbox" name="chat1" id="chat1" checked/>
<label for="chat1" style="font-weight: normal; margin-bottom: 0px;">DreamhackCS</label>
<br>

<input type="checkbox" name="chat2" id="chat2" />
<label for="chat2" style="font-weight: normal; margin-bottom: 0px;">IzakOOO</label>
<br>

<input type="checkbox" name="chat3" id="chat3" />
<label for="chat3" style="font-weight: normal; margin-bottom: 0px;">Nightblue3</label>
<br>

<input type="checkbox" name="chat4" id="chat4" />
<label for="chat4" style="font-weight: normal; margin-bottom: 0px;">imaqtpie</label>
<br><br>

<input type="checkbox" name="active" class="selectchat_active" id="active" />
<label for="active" style="font-weight: normal; margin-bottom: 0px;">Check none</label>
<br>

<input type="checkbox" name="all" class="selectchat_all" id="all"/>
<label for="all" style="font-weight: normal; margin-bottom: 0px;">Check all</label>

＆＃13;

Answer 2

尝试使用.prop代替.attr：

$('#chat1, #chat2, #chat3, #chat4').prop('checked', true);

有关其他信息，请参阅this answer。

自定义CSS复选框jQuery-induced＆＃34; checked＆＃34;财产没有视觉和检查＆＃34;复选框

2 个答案: