Question

所以，我有4个复选框：

加热
AC
冷链
其他

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

选中“其他”时，将显示“请指定”输入文本。

在摘要中，寻找其他解决方案-[值]

这是我的小提琴

$(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>

Answer 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>

Answer 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>

Answer 3

我已经更新了您的Fiddle代码。请看到这一点，它将解决您的问题。

以下是代码段：

$(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

Answer 4

好吧，我修改了您的 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 个答案: