無法取消選中複選框（jQuery）

我有2個複選框，如果您選中一個框，另一個框將被取消選中。但由於某種原因，我不能取消選中已經檢查的框無法取消選中複選框（jQuery）

jQuery(document).ready(function(){ 
    jQuery("input[type='checkbox']").on('click', function() { 
    jQuery("input[type='checkbox']").removeClass('selected').attr('checked', false); 
    jQuery("input[type='checkbox']").parent().removeClass('selected'); 
    jQuery(this).parent().addClass('selected') 
    jQuery(this).attr('checked', true); 
    });

任何想法爲什麼會發生這種情況？

解決方案（感謝斯里）

$('input.example').on('change', function() { 
 
if($(this).is(':checked')) 
 
{ 
 
    $('input.example').not(this).prop('checked', false); 
 
    $('input.example').parent().removeClass('selected'); 
 
    $(this).parent().addClass('selected'); 
 
} 
 
else 
 
{ 
 
    $('input.example').parent().removeClass('selected'); 
 
} 
 
});

.selected { 
 
    background-color:red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="checkbox" class="example" /> 
 
</div> 
 
<div> 
 
    <input type="checkbox" class="example" /> 
 
</div>

來源

2017-05-15 Jack

你爲什麼要使用此複選框？使用具有相同名稱的單選按鈕，甚至不需要任何JS代碼 –

您是否也有HTML？或者你可以在這裏設置一個例子：https：//jsfiddle.net – Niklas

接受答案，而不是後問題部分。 –

爲此，您可以使用不帶選擇器的類。

$('input.example').on('change', function() { 
 
if($(this).is(':checked')) 
 
{ 
 
    $('input.example').not(this).prop('checked', false); 
 
    $('input.example').parent().removeClass('selected'); 
 
    $(this).parent().addClass('selected'); 
 
} 
 
else 
 
{ 
 
    $('input.example').parent().removeClass('selected'); 
 
} 
 
});

.selected { 
 
    background-color:red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="checkbox" class="example" /> 
 
</div> 
 
<div> 
 
    <input type="checkbox" class="example" /> 
 
</div>

來源

2017-05-15 08:17:40

是的，這幾乎爲我工作。如果取消選中該複選框，則該類不會被刪除。如果您點擊另一個框，它已被刪除。 – Jack

在您的評論後看到更新。 –

謝謝，它現在正在工作！ – Jack

在jQuery中，如果你想與類型「複選框」設置「選中」屬性中的「輸入」，你需要用途：

$('input#id').prop('checked', true);

或

$('input#id').prop('checked', false);

來源

2017-05-15 08:11:52 inon

我改變了.attr（'checked'，false）; .prop（'checked'，false）;和attr（'checked'，true）; .prop（'checked'，true）;但不起作用.. 我不想檢查/取消選中一個框，如果一個框被選中，然後取消選中另一個框，我想向父標籤添加一個類。 – Jack

這解釋了jQuery的「ATTR」與「託」以及歷史： https://stackoverflow.com/a/13247188/3514785

1）：使用「託」來選擇/取消複選框

2）：ATTR（「檢查「，false）不會刪除」checked「，而是賦予它」false「的值。如果你真的想使用「attr」，你應該使用removeAttr ...和removeAttr（「checked」）一樣。

來源

2017-05-15 08:17:34 Zuks

無法取消選中複選框（jQuery）

回答

相關問題