我正在制作营销偏好表单,我希望顶部的复选框切换“合作伙伴出版物”行中的所有复选框以及“此出版物”的两行中的所有复选框(这些都是选项奏)。出版物有多个部分,每个部分都有自己的全部检查,因此此复选框应仅检查此部分中的所有内容。
我已经将thisPub和partnerPub与以下代码绑定在一起:
var chk344 = $('#optd344');
var chk343 = $('#optd343');
chk343.on('click', function(){
if( chk343.is(':checked') ) {
chk344.attr('checked', true);
}
});
chk502.on('click', function(){
if( chk502.not(':checked') ) {
chk501.attr('checked', false);
}
});
这是我到目前为止在checkAll行为上所做的,但它没有做任何事情:
var chkAllEventsLegal = $('#events-legal-checkthis');
var allEventsLegal = $('#optd343', '#optd344');
chkAllEventsLegal.on('click', function(){
if( chkAllEventsLegal.not(':checked') ) {
allEventsLegal.attr('checked', false);
}
});
chkAllEventsLegal.on('click', function(){
if( chkAllEventsLegal.is(':checked') ) {
allEventsLegal.attr('checked', true);
}
});
请注意,我无法直接编辑所有html(添加类或诸如此类的东西)。它必须通过JS完成。
<div class="subsection-wrapper" id="events-legal-wrapper">
<div id="eventslegaldonot">I do not wish to receive marketing messages from:</div>
<div id="eventslegalthispub">This Publication</div>
<div id="eventslegalpartners">Partners of This Publication</div>
<hr class="sectionend">
<span class="subcat-label events-legal">All ALM Legal Events Publications</span>
<div id="events-legal-checkthis-wrapper"><input class="checkall" id="events-legal-checkthis" type="checkbox"><span class="optoutcheck"></span></div>
<div id="events-legal-checkpartner-wrapper"><input class="checkall" id="events-legal-checkpartner" type="checkbox"><span class="optoutcheck"></span></div>
<hr class="sectionend">
<span class="subcat-label events-legal">ALM Experts Events</span>
<div id="pd343"><input name="opt10935" value="N" id="optd343" [-checkedopt10935-]="" type="checkbox"><span class="optoutcheck"></span><span class="questionlabel ">ALM Experts Events </span><div id="longd343" class="longdescopt" style="display:none"></div></div>
<div id="pd344"><input name="opt10936" value="N" id="optd344" [-checkedopt10936-]="" type="checkbox"><span class="optoutcheck"></span><span class="questionlabel ">ALM Experts Events Partner </span><div id="longd344" class="longdescopt" style="display:none"></div></div>