如何將我的課程從CSS應用到複選框？

Question

我有這個工作代碼，但爲什麼複選框不影響它？

$("#btn").click(function() { 
 
    if ($("#txt2").val() == 2) { 
 
    alert("Hello"); 
 
    $("#txt").removeClass('validation'); 
 
    $("#chk").removeClass('validation'); 
 
    } else { 
 
    $("#txt").addClass('validation'); 
 
    $("#chk").addClass('validation'); 
 
    } 
 
});

.validation { 
 
    border: 1px solid #ff0000; 
 
    background-color: #ffeeee; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<tr> 
 
    <td> 
 
    <input type="checkbox" id="chk"> 
 
    <input type="text" id="txt"> 
 
    </td> 
 
</tr> 
 
<input type="text" id="txt2"> 
 
<input type="button" id="btn" value="Click">

任何人都知道這個問題或問題？

Answer 1

您的複選框是獲取類（您可以告訴DOM檢查器）;您看不到樣式，因爲未顯示覆選框邊框。

對this question的一些答案建議使用outline而不是border作爲複選框;請參閱下面的示例中的新樣式規則。

$("#btn").click(function() { 
 
    if ($("#txt2").val() == 2) { 
 
    alert("Hello"); 
 
    $("#txt").removeClass('validation'); 
 
    $("#chk").removeClass('validation'); 
 
    } else { 
 
    $("#txt").addClass('validation'); 
 
    $("#chk").addClass('validation'); 
 
    } 
 
});

.validation { 
 
    border: 1px solid #ff0000; 
 
    background-color: #ffeeee; 
 
} 
 
input[type=checkbox].validation { 
 
    outline: 1px solid #ff0000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<tr> 
 
    <td> 
 
    <input type="checkbox" id="chk"> 
 
    <input type="text" id="txt"> 
 
    </td> 
 
</tr> 
 
<input type="text" id="txt2"> 
 
<input type="button" id="btn" value="Click">

Answer 2

$("#btn").click(function() { 
 
    if ($("#txt2").val() == 2) { 
 
    alert("Hello"); 
 
    $("#txt").removeClass('validation'); 
 
    $("#chk").removeClass('border'); 
 
    } else { 
 
    $("#txt").addClass('validation'); 
 
    $("#chk").addClass('border'); 
 
    } 
 
});

.validation { 
 
    border: 1px solid #ff0000; 
 
    background-color: #ffeeee; 
 
} 
 
.border { 
 
    outline: 1px solid #ff0000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<tr> 
 
    <td> 
 
    <input type="checkbox" id="chk"> 
 
    <input type="text" id="txt"> 
 
    </td> 
 
</tr> 
 
<input type="text" id="txt2"> 
 
<input type="button" id="btn" value="Click">

1. 使用大綱

Answer 3

NOTE：事實上你的複選框是上課。使用您的瀏覽器檢查員來查看它。 單獨的background-color對複選框沒有影響。

爲了向您展示我更換光標。將鼠標放在複選框上，然後單擊該按鈕，然後再次將鼠標放在上面。

$("#btn").click(function() { 
 
    if ($("#txt2").val() == 2) { 
 
    alert("Hello"); 
 
    $("#txt").removeClass('validation'); 
 
    $("#chk").removeClass('validation'); 
 
    } else { 
 
    $("#txt").addClass('validation'); 
 
    $("#chk").addClass('validation'); 
 
    } 
 
});

.validation { 
 
    border: 1px solid #ff0000; 
 
    background-color: #ffeeee; 
 
    cursor: wait; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<tr> 
 
    <td> 
 
    <input type="checkbox" id="chk"> 
 
    <input type="text" id="txt"> 
 
    </td> 
 
</tr> 
 
<input type="text" id="txt2"> 
 
<input type="button" id="btn" value="Click">