我正在尝试找出如何通过JavaScript进行代码验证的方法,这样,如果仅单击其他技能复选框,则文本区域不能为空
label><input type="checkbox" name="skill[]" value="CSS"
checked="checked"/>CSS</label>
<label><input type="checkbox" name="skill[]" value="HTML"
/>HTML</label>
<label><input type="checkbox" name="skill[]" value="JavaScript"
/>JavaScript</label>
<label><input type="checkbox" name="skill[]" value="management"
/>management experience</label>
<label><input type="checkbox" name="skill[]" value="PHP"
/>PHP</label>
<label><input type="checkbox" name="skill[]" value="other" />other
skills (please list bellow)</label>
<br/><br/>
<label>Other Skills:</label>
<textarea rows="4" cols="50" name="otherskills" placeholder="Enter
any other skills that would be usefull for the job..."></textarea>
答案 0 :(得分:0)
您可以像下面这样在红色文本区域边框
if(checkcount == 1 && checkedother == true && otherskill == ""){
//console.log(otherskill == "")
$("[name='otherskills'").css('border', '1px solid red');
}else{
$("[name='otherskills'").css('border', '');
}
检查支票== 1 && checkother == true && otherskill ==“”
function check(){
//console.log($("[name='skill[]'").val());
var checkedother = false;
var otherskill = $("[name='otherskills'").val();
$("[name='skill[]'").each(function () {
var checked = (this.checked ? $(this).val() : "");
if(checked == "other"){
checkedother = true;
}
});
if(checkedother == true && otherskill == ""){
//console.log(otherskill == "")
$("[name='otherskills'").css('border', '1px solid red');
}else{
$("[name='otherskills'").css('border', '');
}
return false;
}
function check(){
//console.log($("[name='skill[]'").val());
var checkedother = false;
var otherskill = $("[name='otherskills'").val();
var checkcount = 0;
$("[name='skill[]'").each(function () {
var checked = (this.checked ? $(this).val() : "");
if(checked != "") checkcount++;
if(checked == "other"){
checkedother = true;
}
});
if(checkcount == 1 && checkedother == true && otherskill == ""){
//console.log(otherskill == "")
$("[name='otherskills'").css('border', '1px solid red');
}else{
$("[name='otherskills'").css('border', '');
}
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" onsubmit="return check();">
<label><input type="checkbox" name="skill[]" value="CSS"
checked="checked"/>CSS</label>
<label><input type="checkbox" name="skill[]" value="HTML"
/>HTML</label>
<label><input type="checkbox" name="skill[]" value="JavaScript"
/>JavaScript</label>
<label><input type="checkbox" name="skill[]" value="management"
/>management experience</label>
<label><input type="checkbox" name="skill[]" value="PHP"
/>PHP</label>
<label><input type="checkbox" name="skill[]" value="other" />other
skills (please list bellow)</label>
<br/><br/>
<label>Other Skills:</label>
<textarea rows="4" cols="50" name="otherskills" placeholder="Enter
any other skills that would be usefull for the job..."></textarea>
<button>Send</button>
</form>
答案 1 :(得分:0)
您可以检查checked
输入的长度以及textarea
。
const textArea = document.querySelector('textarea');
const btn = document.querySelector('button');
let count = 0;
btn.addEventListener('click', function(e) {
count = document.querySelectorAll('input:checked').length;
if(count > 0 && textArea.value.length == 0) {
alert('Please enter some text');
return;
}
console.log('Success');
});
<label><input type="checkbox" name="skill[]" value="CSS"
checked="checked"/>CSS</label>
<label><input type="checkbox" name="skill[]" value="HTML"
/>HTML</label>
<label><input type="checkbox" name="skill[]" value="JavaScript"
/>JavaScript</label>
<label><input type="checkbox" name="skill[]" value="management"
/>management experience</label>
<label><input type="checkbox" name="skill[]" value="PHP"
/>PHP</label>
<label><input type="checkbox" name="skill[]" value="other" />other
skills (please list bellow)</label>
<br/><br/>
<label>Other Skills:</label>
<textarea rows="4" cols="50" name="otherskills" placeholder="Enter
any other skills that would be usefull for the job..."></textarea>
<button>Submit</button>
答案 2 :(得分:0)
将类.lastitem
添加到最后一个复选框并调用下面的函数
$(":checkbox").click(countChecked);
function countChecked() {
if ($(".lastitem > input").is(':checked')) {
$("#otherskills").show();
//document.getElementById("otherskills").disabled = false;
}
else {
$("#otherskills").hide();
//document.getElementById("otherskills").disabled = true;
}
}
HTML
<input type="checkbox" name="skill[]" value="CSS"
checked="checked"/>CSS</label>
<label><input type="checkbox" name="skill[]" value="HTML"
/>HTML</label>
<label><input type="checkbox" name="skill[]" value="JavaScript"
/>JavaScript</label>
<label><input type="checkbox" name="skill[]" value="management"
/>management experience</label>
<label><input type="checkbox" name="skill[]" value="PHP"
/>PHP</label>
<label><input type="checkbox" name="skill[]" value="other" />other
skills (please list bellow)</label>
<br/><br/>
<label>Other Skills:</label>
<textarea rows="4" cols="50" class=".lastitem" name="otherskills" placeholder="Enter
any other skills that would be usefull for the job..."></textarea>