Снимите все флажки, если флажок «Другое» установлен и получите значение - PullRequest
Новая
       2

Снимите все флажки, если флажок «Другое» установлен и получите значение

1 голос
/ 08 марта 2019

Итак, у меня есть 4 флажка:

  1. Отопление
  2. AC
  3. Холодная цепь
  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>

Ответы [ 4 ]

2 голосов
/ 08 марта 2019

Сделал простой пример того, как вы можете сделать это, используя функции 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>
0 голосов
/ 08 марта 2019

Ну, я изменил вашу функцию 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(); 
 });
}

Спасибо.

1008 *

0 голосов
/ 08 марта 2019

Я обновил ваш код скрипки. Пожалуйста, посмотрите это, это решит вашу проблему.

Вот фрагмент: 

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

Обновлен код JSFiddle

0 голосов
/ 08 марта 2019

Вам необходимо проверить, установлен ли флажок 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...