如何切換I檢查複選框

我有2個複選框（是/否）與插件I檢查（http://icheck.fronteed.com），當是檢查沒有，將取消選中，反之亦然我想要的。如何切換I檢查複選框

<label class="checkbox-inline i-checks"> <input asp-for="Yes" type="checkbox" id="myicheckboxid1"/> Yes </label> 
    <label class="checkbox-inline i-checks"> <input asp-for="No" type="checkbox" id="myicheckboxid2"/> No </label>

的Javascript

$('.i-checks').iCheck({ 
     checkboxClass: 'icheckbox_square-green', 
     radioClass: 'iradio_square-green' 
    });

來源

2017-05-23 jolynice

這也正是爲什麼我們有單選按鈕。爲什麼不使用它們？ – Dekel

@Dekel評論是正確的，但你也可以使用jQuery'toggle' - https://api.jquery.com/toggle/ –

你好Dekel，我不使用單選按鈕，因爲我需要在某些情況下使複選框是強制性的，在其他情況下不是。 – jolynice

添加事件監聽器和監聽change事件。然後，在事件觸發時運行的回調中，將與複選框相對的屬性更改爲事件值的相反值。

var firstCheckbox = $('#myicheckboxid1'); 
 
var secondCheckbox = $('#myicheckboxid2'); 
 

 
firstCheckbox.prop('checked', true); // default 
 
// you could also use iChecked to do this but it's fine to set with `prop` 
 
// firstCheckbox.iCheck('check'); 
 

 
firstCheckbox.on('change', function(event) { 
 
    secondCheckbox.prop('checked', !event.target.checked); 
 
}); 
 

 
secondCheckbox.on('change', function(event) { 
 
    firstCheckbox.prop('checked', !event.target.checked); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/_all.css" rel="stylesheet" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/blue.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script> 
 

 
<label class="checkbox-inline i-checks"> <input asp-for="Yes" type="checkbox" id="myicheckboxid1"/> Yes </label> 
 
<label class="checkbox-inline i-checks"> <input asp-for="No" type="checkbox" id="myicheckboxid2"/> No </label>

但嚴重的是，你應該考慮一個單選按鈕:)

來源

2017-05-23 23:21:55

Rico，非常感謝。 5星。 – jolynice

如何切換I檢查複選框

回答

相關問題