Question

我有一组复选框。当我选中值为4的复选框时，我希望复选框值为2以自动检查并显示一个带有消息的div。当取消选中值为4的复选框时，我希望消息消失。消息切换为复选框值4。

取消选中复选框值4后，我能够让消息消失，但是当我再次检查时，消息不会再次出现，而且值2的复选框也不会再次自动检查。< / p>

HTML：

<input type="checkbox" value="2" id="user_role_ids_"><br>
<input type="checkbox" value="4" id="user_role_ids_"><br>

JS：

var chk1 = $("input#user_role_ids_[type='checkbox'][value='4']");
var chk2 = $("input#user_role_ids_[type='checkbox'][value='2']");
var checkmsg = $('<div/>', {'class': 'checkbox-message'}).html('If you are a Copywriter   
    Manager, you are also a Copywriter')

chk1.on('change', function(){
    $(checkmsg).insertAfter("input#user_role_ids_[type='checkbox'][value='4']");
    chk2.prop('checked',this.checked);
});

我知道你不应该有两个具有相同id的元素。请不要对此发表评论。

http://jsfiddle.net/q5Rr8/4/

Answer 1

您可以toggle()这样的消息 Demo 。

首先隐藏元素：

var checkmsg = $('<div/>', .... Copywriter').hide();

然后使用on(change)

切换

chk1.on('change', function(){
  $(checkmsg).insertAfter("input#... [value='4']").toggle();
  chk2.prop('checked',this.checked);
});

Answer 2

使用CSS解决方案并将“动态”HTML直接添加到布局中，无需涉及JavaScript

<强> HTML：

<input type="checkbox" /><span>My Message!</span><br>

<强> CSS：

[type="checkbox"] + span {
    display:none;
}

[type="checkbox"]:checked + span {
    display: inline;
}

<强>样本：

http://jsfiddle.net/MxUU6/

如果您想在JavaScript中使用相同的HTML进行操作，那只是

$("#formId").on("change", '[type="checkbox"]', function() {
   $(this).next("span").toggle(this.checked);
});

如果页面上有其他复选框，则添加类以使其更具体。

Answer 3

我建议你只根据他们的ID定位复选框，并确保它们是唯一的

<强>演示
http://jsfiddle.net/q5Rr8/7/

var chk1 = $("#user_role_ids1"); var chk2 = $("#user_role_ids2"); chk1.on('change', function(){ $(checkmsg).insertAfter("#user_role_ids1"); chk2.prop('checked',this.checked); });

小心使用仅限css的解决方案，因为在版本9之前的Internet Explorer中不支持'：checked'，使用功能检测或只是让javascript来处理所有

http://quirksmode.org/css/selectors/

用复选框切换div

3 个答案: