带复选框的切换div

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

取消选中复选框值4后，我可以让消息消失，但是当我再次查看消息时，消息不再出现，并且值为2的复选框没有响应不再自动检查。

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/

来源

2014-01-27 anmaree

ID **必须是唯一的。 – j08691

只需将消息直接放入HTML中并切换其状态即可。 – epascarello

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

首先隐藏元件：

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

然后与on(change)

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

来源

2014-01-27 16:57:10 DaniP

切换使用CSS溶液和直接添加 “动态” HTML到布局，不需要涉及JavaScript

HTML：

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

CSS：

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

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

DEMO：

http://jsfiddle.net/MxUU6/

如果你想用相同的HTML做到这一点在JavaScript它只是

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

添加类，使之更加具体，如果你有在页面上的其他复选框。

来源

2014-01-27 16:59:20 epascarello

我建议你通过简单的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中不受支持，请使用功能检测或简单地让JavaScript处理所有这些问题

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

来源

2014-01-27 17:00:02

带复选框的切换div

回答

相关问题