如果选中“其他”复选框并获取值，则取消选中所有复选框答案

【问题标题】：Uncheck all checkboxes if "Other" checkbox is checked and get value如果选中“其他”复选框并获取值，则取消选中所有复选框
【发布时间】：2019-03-09 18:53:16
【问题描述】：

所以，我有 4 个复选框：

加热
交流
冷链
其他

条件是，您可以同时检查三个：加热、交流和冷链。但是，当您选中“其他”时，这三个将被取消选中。当您再次选中三个中的任何一个时，其他复选框将被取消选中。

勾选Others时，会出现“请说明”的输入文字。

总之，在其他人中寻找解决方案 - [价值]

这是我的小提琴

$(document).ready(displayCheckbox);

CountSelectedCB = [];

function displayCheckbox() {       
  $("input:checkbox").change(function() {                 
    selectedCB = [];        
    notSelectedCB = [];                
    CountSelectedCB.length = 0;        
    $("input:checkbox").each(function() {            
      if ($(this).is(":checked")) {                
        CountSelectedCB.push($(this).attr("value"));            
      }        
    });                
    $('input[name=solutions]').val(CountSelectedCB).blur();    
  });
}   

$(document).ready(displayRadiobox);

CountSelectedRB = [];

function displayRadiobox() {       
  $("input:radio").change(function() {                 
    selectedRB = [];        
    notSelectedRB = [];                
    CountSelectedRB.length = 0;        
    $("input:radio").each(function() {            
      if ($(this).is(":checked")) {                
        CountSelectedRB.push($(this).attr("value"));            
      }        
    });                
    $('input[name=existing]').val(CountSelectedRB).blur();     
  });
}


$('#solutions, #existing').bind('keyup blur', function() {            
  $('#summary').val('You are looking for solutions in ' +                               $('#solutions').val() +                               (' \n') +                              'Are you using an existing customer? ' +                               $('#existing').val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
  <input type="checkbox" value="Heating">Heating<br>
  <input type="checkbox" value="Ac">AC<br>
  <input type="checkbox" value="Cold Chain">Cold Chain<br>
  <input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">


<div><br>Are you an exisiting customer?<br>
  <input type="radio" value="Yes" name="radio">Yes<br>
  <input type="radio" value="No" name="radio">No
</div>

<input name="existing" type="text" id="existing">
<br><br> Summary:
<br>
<textarea type='text' id="summary"></textarea>

【问题讨论】：

你有什么尝试取消选中其他的？

标签： javascript jquery checkbox

【解决方案1】：

为你做了一个简单的例子，你如何使用prop() 和siblings() 函数来做到这一点。

为更好的选择器添加了一些类。

$('#wrapper .some-checkbox').on('change', function() {
  var $this = $(this);
  if ($this.prop('checked')) {
    if ($this.is('.some-others')) {
      $this.siblings().prop('checked', false);
    }
    else {
      $this.siblings('.some-others').prop('checked', false);
    } 
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <input class="some-checkbox" type="checkbox" value="Heating">Heating<br>
  <input class="some-checkbox" type="checkbox" value="Ac">AC<br>
  <input class="some-checkbox" type="checkbox" value="Cold Chain">Cold Chain<br>
  <input class="some-checkbox some-others" type="checkbox" value="Others">Others<br>
</div>

【讨论】：

我会接受这个答案，比接受的答案简单得多！我知道被接受的人试图做出最少的改变，但这只是读起来很痛苦。
@JuanMendes 谢谢你的好话，不过每个人都有自己的喜好。也许 OP 无法更改 html。
我以前从来没有得到过一个吻回答：p 当然，只是我的 2 美分

【解决方案2】：

你需要检查复选框Others是否被选中，然后用$('<your-checkbox->').prop('checked', false);取消选中其他复选框

例如：

$(document).ready(displayCheckbox);

CountSelectedCB = [];

function displayCheckbox(){    
    $("input:checkbox").change(function() {          
        selectedCB = [];
        notSelectedCB = [];
        
        CountSelectedCB.length = 0;
        $("input:checkbox").each(function() {
            if ($(this).is(":checked")) {
                CountSelectedCB.push($(this).attr("value"));
                if ($(this).attr("value") === "Others") {
                  CountSelectedCB = []; // reset result
                	$("input:checkbox").each(function() {
                     if ($(this).attr("value") !== "Others") {
                     	$(this).prop('checked', false); // uncheck
                     }
                  });
                  $('input[name=solutions]').hide(); // toggle input
                  $('input[name=specify]').show(); // toggle input
                }
            }
        });
        
        $('input[name=solutions]').val(CountSelectedCB).blur();
    });
}    

$(document).ready(displayRadiobox);

CountSelectedRB = [];

function displayRadiobox(){    
    $("input:radio").change(function() {          
        selectedRB = [];
        notSelectedRB = [];
        
        CountSelectedRB.length = 0;
        $("input:radio").each(function() {
            if ($(this).is(":checked")) {
                CountSelectedRB.push($(this).attr("value"));
            }
        });
        
        $('input[name=existing]').val(CountSelectedRB).blur(); 
    });
} 


$('#solutions, #existing').bind('keyup blur', function() {
        
    $('#summary').val('You are looking for solutions in ' + 
                             $('#solutions').val() + 
                             (' \n') +
                             'Are you using an existing customer? ' + 
                             $('#existing').val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" placeholder="Please specify" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">


<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>

<input name="existing" type="text" id="existing">
<br><br>
Summary:<br>
<textarea type='text' id="summary"></textarea>

【讨论】：

【解决方案3】：

好吧，我修改了你的 displayCheckbox() 函数。请像这样尝试。我想你的问题会解决的。

function displayCheckbox(){    
   $("input:checkbox").change(function() {
     selectedCB = [];
     notSelectedCB = [];
     CountSelectedCB.length = 0;
     if($('input:checkbox[value="Others"]').is(":checked")){
        $('input:checkbox').not(this).prop('checked', false);
        CountSelectedCB.length = 0;
        CountSelectedCB.push($(this).attr("value"));
     }else{
        $("input:checkbox").each(function() {
        if ($(this).is(":checked")) {
           CountSelectedCB.push($(this).attr("value"));
        }
     });
    }
    $('input[name=solutions]').val(CountSelectedCB).blur(); 
 });
}

谢谢。

【讨论】：

【解决方案4】：

我已经更新了你的 Fiddle 代码。请看这个，它会解决你的问题。

这里是sn-p：

$(document).ready(displayCheckbox);

CountSelectedCB = [];

function displayCheckbox() {       
  $("input:checkbox").change(function() {                 
    selectedCB = [];        
    notSelectedCB = [];
    selectedValue = $(this).attr("value");                
    CountSelectedCB.length = 0;

    if (selectedValue === "Others" && $(this).is(":checked")) {
      uncheckAllCheckBox();
      $(this).prop('checked', true);
      CountSelectedCB.push(selectedValue);
    } else {
      $("input:checkbox").each(function() {
        if ($(this).attr("value") === "Others")
          $(this).prop('checked', false);

        if ($(this).is(":checked")) {
          CountSelectedCB.push($(this).attr("value"));
        }
      });
    }                        
    $('input[name=solutions]').val(CountSelectedCB).blur();    
  });
}

function uncheckAllCheckBox() {
  $("input:checkbox").each(function() {
    $(this).prop('checked', false);
    CountSelectedCB.length = 0;
  });
}

$(document).ready(displayRadiobox);

CountSelectedRB = [];

function displayRadiobox() {       
  $("input:radio").change(function() {                 
    selectedRB = [];        
    notSelectedRB = [];                
    CountSelectedRB.length = 0;        
    $("input:radio").each(function() {            
      if ($(this).is(":checked")) {                
        CountSelectedRB.push($(this).attr("value"));            
      }        
    });                
    $('input[name=existing]').val(CountSelectedRB).blur();     
  });
}


$('#solutions, #existing').bind('keyup blur', function() {            
  $('#summary').val('You are looking for solutions in ' +                               $('#solutions').val() +                               (' \n') +                              'Are you using an existing customer? ' +                               $('#existing').val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
  <input type="checkbox" value="Heating">Heating<br>
  <input type="checkbox" value="Ac">AC<br>
  <input type="checkbox" value="Cold Chain">Cold Chain<br>
  <input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">


<div><br>Are you an exisiting customer?<br>
  <input type="radio" value="Yes" name="radio">Yes<br>
  <input type="radio" value="No" name="radio">No
</div>

<input name="existing" type="text" id="existing">
<br><br> Summary:
<br>
<textarea type='text' id="summary"></textarea>

Updated JSFiddle Code

【讨论】：