如果選中了“其他”復選框，則取消選中所有復選框並獲取價值

Question

因此，我有4個復選框：

1. 加熱
2. AC
3. 新鮮食品的）低溫運輸系統
4. 其他

條件是，您可以多次檢查以下三個：加熱，交流和冷鏈。 但是，當您選中“其他”時，這三個將未被選中。 並且當您再次檢查三個選項中的任何一個時，其他復選框將被取消選中。

選中其他時，將顯示“請指定”輸入文本。

在摘要中，尋找其他解決方案-[值]

這是我的小提琴

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

更新了JSFiddle代碼

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(); 
 });
}

謝謝。