在 jquery 中选中具有给定值的复选框

Question

我有复选框，我想在 jquery 中检查具有特定值 id 的复选框我想检查具有值“ test ”的复选框meetingcategory是否被选中，如果选中需要取消选中相关的复选框线索和联系人。

 $(".meetingcategory input").click(function(){ if($(this).val()=='test') //need to check is checked { $('.relatedto input[value="Leads"]').prop('checked', false); $('.relatedto input[value="Contacts"]').prop('checked', false); } else{ $('.relatedto input[value="Leads"]').prop('checked', true); $('.relatedto input[value="Contacts"]').prop('checked', true); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='meetingcategory'> <input type="checkbox" title="test" id="ms-opt-124" value="test">test <input type="checkbox" title="test1" id="ms-opt-124" value="test1">test1 </div> <div id='relatedto'> <label for="ms-opt-1"><input type="checkbox" title="Leads" id="ms-opt-1" value="Leads" checked>Leads</label> <label for="ms-opt-1"><input type="checkbox" title="Contacts" id="ms-opt-1" value="Contacts" checked>Contacts</label> <label for="ms-opt-1"><input type="checkbox" title="Blank" id="ms-opt-1" value="Blank" checked>Blank</label> </div>

Answer 1

 $(".meetingcategory input").click(function() { if ($(this).val() == 'test') //need to check is checked { $('input[value="Leads"]').prop('checked', false); $('input[value="Contacts"]').prop('checked', false); } else { $('input[value="Leads"]').prop('checked', true); $('input[value="Contacts"]').prop('checked', true); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='meetingcategory'> <input type="checkbox" title="test" id="ms-opt-124" value="test">test <input type="checkbox" title="test1" id="ms-opt-124" value="test1">test1 </div> <div id='relatedto'> <label for="ms-opt-1"><input type="checkbox" title="Leads" id="ms-opt-1" value="Leads" checked>Leads</label> <label for="ms-opt-1"><input type="checkbox" title="Contacts" id="ms-opt-1" value="Contacts" checked>Contacts</label> <label for="ms-opt-1"><input type="checkbox" title="Blank" id="ms-opt-1" value="Blank" checked>Blank</label> </div>

我不确定，你为什么在选择器中使用“.relatedto”，这工作正常。

Answer 2

不需要这个.relatedto。 你可以使用唯一的属性

 $(".meetingcategory input").click(function(){ if($(this).val()=='test') //need to check is checked { $('.relatedto input[value="Leads"]').prop('checked', false); $('.relatedto input[value="Contacts"]').prop('checked', false); } else{ $('.relatedto input[value="Leads"]').prop('checked', true); $('.relatedto input[value="Contacts"]').prop('checked', true); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='meetingcategory'> <input type="checkbox" title="test" id="ms-opt-124" value="test">test <input type="checkbox" title="test1" id="ms-opt-124" value="test1">test1 </div> <div id='relatedto'> <label for="ms-opt-1"><input type="checkbox" title="Leads" id="ms-opt-1" value="Leads" checked>Leads</label> <label for="ms-opt-1"><input type="checkbox" title="Contacts" id="ms-opt-1" value="Contacts" checked>Contacts</label> <label for="ms-opt-1"><input type="checkbox" title="Blank" id="ms-opt-1" value="Blank" checked>Blank</label> </div>

 $(".meetingcategory input").click(function(){ if($(this).val()=='test') //need to check is checked { $('input[value="Leads"]').prop('checked', false); $('input[value="Contacts"]').prop('checked', false); } else{ $('input[value="Leads"]').prop('checked', true); $('input[value="Contacts"]').prop('checked', true); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='meetingcategory'> <input type="checkbox" title="test" id="ms-opt-124" value="test">test <input type="checkbox" title="test1" id="ms-opt-124" value="test1">test1 </div> <div id='relatedto'> <label for="ms-opt-1"><input type="checkbox" title="Leads" id="ms-opt-1" value="Leads" checked>Leads</label> <label for="ms-opt-1"><input type="checkbox" title="Contacts" id="ms-opt-1" value="Contacts" checked>Contacts</label> <label for="ms-opt-1"><input type="checkbox" title="Blank" id="ms-opt-1" value="Blank" checked>Blank</label> </div>