我有一组两个复选框和一个文本输入。如果选择了其中一个（或两个）复选框，我需要需要输入文本，如果文本输入包含文本，我需要至少需要其中一个复选框。我遇到的另一个问题是它使用自定义模板引擎（PHP 后端）并且配置和获取正确的属性很痛苦，另一个问题是它全部由 name 属性引用，这就是我使用 HTML5 的原因我认为它有效的复选框选项的数据组。
任何帮助使其工作、组合功能的帮助（如果这使它更容易/更简单）。
顺便说一句，它正在运行 1.3.2 jQuery
示例：（不起作用）
有什么建议吗？
JS：
function checkboxSelectedRequiredAdditionalFields(elem) {
var passedElement = $('input:checkbox[name=' + elem + ']');
passedElement.click(function() {
$('input[name=number]').attr('required', true).append('<span class="required">*</span>');
alert('text is required now?');
});
}
function numberEnteredRequiredAdditionalFields(elem) {
var passedElement = $('input[name=' + elem + ']');
if (passedElement.val().length > 0) {
var boxes = $('input[data-group=cbOptions]').click(function() {
boxes.not(this).attr('required', false);
alert('checkbox is selected so other checkbox is not required');
});
$('input[data-group=cbOptions]').each(function() {
$(this).attr('required', true).next().append('<span class="required">*</span>');
alert('checkbox is required now?');
});
}
}
HTML
<form>
<label>
<input type="checkbox" name="checkbox1" value="t" onclick="checkboxSelectedRequiredAdditionalFields('checkbox1');" data-group="cbOptions">
Checkbox Option 1
</label>
<label>
<input type="checkbox" name="checkbox2" value="t" onclick="checkboxSelectedRequiredAdditionalFields('checkbox2');" data-group="cbOptions">
Checkbox Option 2
</label>
Number <b>
<input type="text" name="number" value="" size="" maxlength="9" onclick="numberEnteredRequiredAdditionalFields('number');">
</b>
</form>
您应该将 JavaScript 与 HTML 分开。 小提琴：http://jsfiddle.net/NYn8e/6/。如果可能，从 HTML 源中删除
<b>font-weight: bold;<form>
<label>
<input type="checkbox" name="checkbox1" value="t" data-required="checkbox">
Checkbox Option 1
</label>
<label>
<input type="checkbox" name="checkbox2" value="t" data-required="checkbox">
Checkbox Option 2
</label>
Number <b>
<input type="text" name="number" value="" size="" maxlength="9" data-required="number">
</b>
</form>
JavaScript：
function required(){
//Any checked checkbox? checked == 0 = no, otherwise: yes
var checked = $('input[data-required=checkbox]:checked').length;
var $checkboxes = $('input[data-required=checkbox]');
var $num = $('input[name=number]');
var length = $num.val().length;
//Remove previously added span, if existent.
$num.next('span.required').remove();
$checkboxes.next('span.required').remove();
if(!length && checked){
$num.after('<span class="required">*</span>');
alert("Number required!");
} else if(length && !checked){
$checkboxes.after('<span class="required">*</span>');
alert("Check at least one checkbox.");
}
}
$(document).ready(function(){
$("[data-required]").change(required);
});
=）这个对你有帮助吗？
<form id='myForm'>
<input type='checkbox' name='checkbox1' value='t' id='checkbox1' onchange='alertUser()' />
<input type='checkbox' name='checkbox2' value='t' id='checkbox2' onchange='alertUser()' />
<input type='text' name='number' id='number' onchange='alertUser()'/>
</form>
<script type='text/javascrip>
function alertUser() {
var checked1 = $('#checkbox1').attr('checked');
var checked2 = $('#checkbox2').attr('checked');
var number = $('#number').val();
if ((checked1 == true || checked2 == true) && number == '') {
alert('Number is required!');
} else if (number != '' && (checked1 != true && checked2 != true)) {
alert('One of the checkbox need to be checked!');
}
});
</script>
这应该能让您了解如何完成任务。 http://jsfiddle.net/NYn8e/8/
var $textbox = $('input[name=number]').hide();
$('input[type=checkbox]').change(function() {
var $this = $(this); //store jquery object
//get the other checkbox
var $other= ($this.attr('name') === 'checkbox1') ? $('input[name=checkbox2]') : $('input[name=checkbox1]');
if (!$other.is(':checked') && !$this.is(':checked')) {
$textbox.val('').hide();
} else{
$textbox.show();
}
});
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
Checkbox : <input type="checkbox"id="decline_trusted_contact" name="decline_trusted_contact"onclick="mycheckfunc()" ><br><br>
F NAME <span id="firstnameasterisks" class="astrskreqd">*</span>: <input type="text"id="restri_trustedPersonfirstname" name="restri_trustedPersonfirstname"><br><br>
L NAME <span id="lastnameasterisks" class="astrskreqd">*</span>: <input type="text"id="restri_trustedPersonlastname" name="restri_trustedPersonlastname"><br><br>
MOBILE <span id="mobilenumasterisks" class="astrskreqd">*</span>: <input type="text"id="restri_trustedPersonMobilephone" name="restri_trustedPersonMobilephone"><br><br>
<input type="submit">
</form>
<script>
mycheckfunc();
function mycheckfunc(){
var checkBox = document.getElementById("decline_trusted_contact");
var firstname = document.getElementById("restri_trustedPersonfirstname");
var lastname = document.getElementById("restri_trustedPersonlastname");
var mobilenumber = document.getElementById("restri_trustedPersonMobilephone");
var fnameasterisks = document.getElementById("firstnameasterisks");
var lnameasterisks = document.getElementById("lastnameasterisks");
var mnumasterisks = document.getElementById("mobilenumasterisks");
if (checkBox.checked == true){
firstname.required = false;
lastname.required = false;
mobilenumber.required = false;
//fnameasterisks.remove();
//lnameasterisks.remove();
// mnumasterisks.remove();
fnameasterisks.style.display = "none";
lnameasterisks.style.display = "none";
mnumasterisks.style.display = "none";
} else {
firstname.required = true;
lastname.required = true;
mobilenumber.required = true;
fnameasterisks.style.display = "inline";
lnameasterisks.style.display = "inline";
mnumasterisks.style.display = "inline";
}
}
</script>
</body>
</html>