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

Question

我在一组中有两个复选框和一个文本输入。如果选择了其中一个（或两个）复选框，我需要要求文本输入，如果文本输入包含文本，我需要至少要求其中一个复选框。我遇到的另一个问题是它使用自定义模板引擎（PHP 后端）并且配置和获取正确的属性很痛苦，另一个问题是它全部由 name 属性引用，这就是我使用 HTML5 的原因我认为它有效的复选框选项的数据组。

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

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

示例：（不工作）

• http://jsfiddle.net/NYn8e/1/< /a>

有什么建议吗？

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>

Answer 1

您应该将 JavaScript 与 HTML 分开。 小提琴：http://jsfiddle.net/NYn8e/6/。如果可能，请从 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>

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

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

Answer 3

希望这能让您了解如何完成任务。 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();
    }                          
});

Answer 4

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