取消选中复选框时从收音机中删除“选中”

Posted 2023-05-09

【中文标题】取消选中复选框时从收音机中删除“选中”

【英文标题】：Remove "checked" from radio when a checkbox is unchecked

【发布时间】：2015-05-19 07:06:10

【问题描述】：

我有一个复选框 (#FBmngCH)，单击时会显示一组单选按钮 (name=adManage)。取消单击复选框时，先前选择的单选按钮仍保持选中状态。一旦取消选中复选框，我希望删除单选按钮的选中状态。

这是在表单中使用的，所以如果用户改变了选择该服务的想法，我希望该服务的详细信息也被擦除（因此所选单选的值不会最终出现在 php最后是电子邮件）。我希望这是有道理的。

我已经给了这个相当长的时间，但似乎没有让它正常工作。最后一组 if 语句是我编写的代码的一部分。不知道我是否遗漏了什么，选择了错误的东西，或者什么。对此的任何帮助将不胜感激。谢谢！

html

<li>
    <input type="checkbox" class="cbox" name="FBchecks[]" value="Facebook Ad MGMT" id="FBmngCH">
    <label for="test">Facebook Ad Management</label>
    <ul id="FBmngList">
        <li>
            <input type="radio" name="adManage" value="Ad Management 1" id="adMan1">
            <label for="adMan1">Ad Fund - 1</label>
        </li>
        <li>
            <input type="radio" name="adManage" value="Ad Management 2" id="adMan2">
            <label for="adMan2">Ad Fund - 2</label>
        </li>
        <li>
            <input type="radio" name="adManage" value="Ad Management 3" id="adMan3">
            <label for="adMan3">Ad Fund - 3</label>
        </li>
        <li>
            <input type="radio" name="adManage" value="Ad Management 4" id="adMan4">
            <label for="adMan4">Ad Fund - 4</label>
        </li>
        <div id="FBADerror" class="acctError"></div>
    </ul>
</li>

JS

$FBmngCH = $("#FBmngCH");
$FBmngList = $("#FBmngList");

//hide FB Management List
$FBmngList.hide();

//on FB Management select
$FBmngCH.click(function() 
    //toggle FB Management List
    $FBmngList.toggle();
);

$FBadValid = false;
$FBADerror = $("#FBADerror");

//if FB Ad Management is checked
if ($FBmngCH.attr('checked')) function validateFB() 
   $("input[name=adManage]").each(function ()    //LoopingthroughradioButtons
    // "this" is the current element(radio) in the loop
      if ($(this).is(':checked')) 
            $FBadValid = true; //Radio Button is Checked);
      

      if ($FBadValid.attr = true ) 
            $FBADerror.empty();
      
   );
;
if ($FBmngCH.blur($FBadValid.attr = false)) 
    $FBADerror.append("<li> Please select a Facebook Ad plan. </li>");
    //appends error to document
   
if ($FBmngCH.blur($FBmngCH.not('checked'))) 
    $("input[name=adManage]").each(function () 
        if ($(this).is(':checked')) 
            $("input[name=adManage]").removeAttr('checked');
        
    );
    //remove checks from radios
;  
$("input[name=adManage]").click(validateFB);

【参考方案1】：

也许我不了解您的要求，但您不能在您的复选框事件例程中对此进行测试并取消选中选中的单选按钮：

$FBmngCH.click(function () 
    //toggle FB Management List
    $FBmngList.toggle();
    if (!$FBmngList.attr('checked')) 
        $FBmngList.find('input:checked').attr('checked', false);
    
);

见this Fiddle.

【参考方案2】：

您的代码中几乎没有错误：

if ($FBmngCH.blur($FBadValid.attr = false)) 

这不是正确的语法。应该是：

$FBmngCH.blur(function()
    if ($FBadValid === false) 

    
);

基本上，由于您正在切换整个无线电部分并愿意在不检查任何条件的情况下删除其:checked 属性，因此您不需要循环或if($(this).is(':checked')) 语句。只需从所有收音机中删除 :checked 属性即可。您还可以在每次单击复选框时显示错误消息，而无需 if 条件，因为无论如何整个部分都是隐藏的。

你应该得到非常短的代码，像这样：

$FBmngCH = $("#FBmngCH");
$FBmngList = $("#FBmngList").hide();
$FBADerror = $("#FBADerror");

$FBmngCH.click(function() 
    // no need for loops and if's there. Radios and the message are hidden.
    $FBmngList.toggle();
    $FBADerror.html("<li> Please select a Facebook Ad plan. </li>"); 
    $("input[name=adManage]").prop('checked', false);
);

$("input[name=adManage]").click(function()
    // no need for loops there. Radios and the message are hidden.
    // Also, no need for if($(this).is(':checked')). Since it's a click handler, something has to be :checked on radio click.
    $FBADerror.empty();
);

DEMO