Javascript 复选框和文本字段，如果其中一个已选中或具有值，则需要其他

我在一个组中有两个复选框和一个文本输入。如果选中其中一个（或两个）复选框，则需要输入文本，如果文本输入包含文本，则至少需要一个复选框。我遇到的另一个问题是，它使用自定义模板引擎（PHP后端），配置和获得正确的属性很困难，另一个问题是它都由name属性引用，这就是为什么我使用HTML5数据组作为复选框选项，我认为这是可行的

使其工作的任何帮助，组合功能（如果这使其更容易/更简单）

顺便说一句，它正在运行1.3.2 jQuery

示例：（不工作）

有什么建议吗

JS:

功能复选框SelectedRequiredAdditionalFields（elem）{
var passedElement=$（'input:checkbox[name='+elem+']'）；
passedElement.单击（函数（）{
$（'input[name=number]'）。attr（'required'，true）。append（'*'）；
警报（'现在需要文本？'）；
});
}
函数号RequiredRequiredAdditionalFields（elem）{
变量passedElement=$（'input[name='+elem+']'）；
如果（passedElement.val（）.length>0）{
变量框=$（'input[data group=cbOptions]'）。单击（函数（）{
框.not（this）.attr（'required'，false）；
警报（“选中复选框，因此不需要其他复选框”）；
});
$（'input[data group=cbOptions]'）。每个（函数（）{
$（this.attr（'required'，true）.next（）.append（'*'）；
警报（'现在需要复选框？'）；
});
}
}

HTML

复选框选项1
复选框选项2
数

=）这个能帮你吗

<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>

这个能帮你吗

<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>


您应该将JavaScript与HTML分开小提琴：。如果可能，从HTML源代码中删除
，并使用正确的CSS属性扩展样式表：
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>


复选框选项1
复选框选项2
数

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);
});

所需函数（）{
//是否有选中的复选框？选中==0=否，否则：是
var checked=$（'input[data required=checkbox]：checked'）。长度；
var$复选框=$（“输入[所需数据=复选框]”）；
var$num=$（'input[name=number]'）；
变量长度=$num.val（）.length；
//删除以前添加的跨度（如果存在）。
$num.next（'span.required'）.remove（）；
$checkbox.next（'span.required'）.remove（）；
如果（！长度&&checked）{
$num.after（'*'）；
警报（“需要号码！”）；
}else if（长度和长度已选中）{
$checkbox.after（'*'）；
警报（“至少选中一个复选框”）；
}
}
$（文档）.ready（函数（）{
$（“[所需数据]”）。更改（所需）；
});
您应该将JavaScript与HTML分开小提琴：。如果可能，从HTML源代码中删除
，并使用正确的CSS属性扩展样式表：
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>


复选框选项1
复选框选项2
数

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);
});

所需函数（）{
//是否有选中的复选框？选中==0=否，否则：是
var checked=$（'input[data required=checkbox]：checked'）。长度；
var$复选框=$（“输入[所需数据=复选框]”）；
var$num=$（'input[name=number]'）；
变量长度=$num.val（）.length；
//删除以前添加的跨度（如果存在）。
$num.next（'span.required'）.remove（）；
$checkbox.next（'span.required'）.remove（）；
如果（！长度&&checked）{
$num.after（'*'）；
警报（“需要号码！”）；
}else if（长度和长度已选中）{
$checkbox.after（'*'）；
警报（“至少选中一个复选框”）；
}
}
$（文档）.ready（函数（）{
$（“[所需数据]”）。更改（所需）；
});
这将有助于您了解如何完成任务

希望这能给你一个如何完成任务的想法

谢谢你的回答，但不幸的是，我需要这是一个onclick提交处理所需的验证already@PhillPafford：这是否意味着您只想提醒用户，例如，他需要在选中其中一个复选框时键入数字吗？谢谢你的回答，但不幸的是，我需要在提交处理所需验证时再次单击already@PhillPafford：这是否意味着您只想提醒用户，例如，当他选中其中一个复选框时，他需要键入数字？问题的一部分是，您正在为同一元素单击事件中的元素分配单击处理程序。如果您查看firebug，您将看到错误。问题的一部分是您在相同的元素单击事件中为元素分配单击处理程序。如果您查看firebug，您将看到错误。将其更改为与我的onClick/onChange事件一起使用，这非常有效，谢谢！将其更改为与我的onClick/onChange事件一起使用，效果非常好，谢谢！