根据复选框显示/隐藏 2 个（必需）表单字段答案

【问题标题】：Show/Hide 2 (REQUIRED) Form Fields based on Checkbox根据复选框显示/隐藏 2 个（必需）表单字段
【发布时间】：2013-10-03 05:38:16
【问题描述】：

好的，我正在尝试根据复选框选择显示 2 个表单字段。这 2 个表单字段是必需的。所以基本上当复选框被选中时，我需要显示这些字段并让它们成为必需的。否则它们是隐藏的，因此不需要。我有显示隐藏排序工作。它不会在取消选择时可靠地隐藏（选择组中的另一个复选框）。此外，当它们被隐藏时，它们仍然是必需的，所以我得到了一个很好的错误......

我被困住了。任何有建议的人。我还是很新。提前致谢。下面是我的内容：

    <label for="nothing">
    Test Method<br/>
    <label>
        <input type="checkbox" class="testmethod" id="kickback" name="kickback" value="yes" onclick="javascript:yesnoCheck();" tabindex="5" <?= ( $settings['kickback'] == 'yes' ? 'checked = "checked"' : '' ) ?>>
            Kickback
    </label>
    <label>
        <input type="checkbox" class="testmethod" id="manual" name="manual" value="yes" onclick="javascript:yesnoCheck();" tabindex="5" <?= ( $settings['manual'] == 'yes' ? 'checked = "checked"' : '' ) ?>>
            Manual
    </label>
    <label>
        <input type="checkbox" class="testmethod" id="beastmode" name="beastmode" value="yes" onclick="javascript:yesnoCheck();" tabindex="5" <?= ( $settings['beastmode'] == 'yes' ? 'checked = "checked"' : '' ) ?>>
            Beast Mode
    </label>                
</label>
    <label for="my-text-field" id="mytextfield" style="visibility:hidden">
    My Text Field <em>&nbsp;<small>*Required*</small></em>
    <input type="text" name="mytextfield" value="<?= $settings['mytextfield'] ?>" tabindex="6" required/>
</label>

<label for="my-number-field" id="mynumberfield" style="visibility:hidden">
    Number of Images <em>&nbsp;<small>*Required*</small></em>
    <input type="number" name="mynumberfield" value="<?= $settings['mynumberfield'] ?>" tabindex="7" required/>
</label>

这是我的 JS

$("input.testmethod").click(function() {

$('input:checkbox[class="' + $(this).attr('class') + '"]').prop('checked', false);
$(this).prop('checked', true);

});

function yesnoCheck() {
if (document.getElementById('beastmode').checked) 
{
    document.getElementById('mytextfield').style.visibility = 'visible'
    document.getElementById('mynumberfield').style.visibility = 'visible';        
}
else
{
    document.getElementById('mytextfield').style.visibility = 'hidden';
    document.getElementById('mynumberfield').style.visibility = 'hidden';  
} 

}

【问题讨论】：

标签： jquery html forms show-hide required

【解决方案1】：

试着澄清你的问题，我很难理解你想要什么。 my-text-field 和 my-number-field 的值是否必须基于检查的输入值？

好的，这应该可以。

$("#beastmode").click(function () {
if ($(this).prop('checked') === true) {
    $('#mytextfield').show();
    $('#mynumberfield').show();
    $('input[name="mytextfield"]').prop('required',true);
    $('input[name="mynumberfield"]').prop('required',true);
} else {
    $('#mytextfield').hide();
    $('#mynumberfield').hide();
    $('input[name="mytextfield"]').prop('required',false);
    $('input[name="mynumberfield"]').prop('required',false);        
}
});

还有小提琴http://jsfiddle.net/n67Mf/1/

我刚刚关闭了一些标签并删除了一些不必要的代码。

【讨论】：

复选框只是“激活”这些字段。因此，如果您选择手动该方法不需要 2 个隐藏字段。而如果您选择野兽模式，则需要这些字段中的信息。抱歉没有更清楚。谢谢！

【解决方案2】：

在RequiredFieldValidator 中使用验证组，并在选中复选框时调用此方法。

【讨论】：

【解决方案3】：

使用此代码

document.getElementById("ID").required = false;

在您的代码中

function yesnoCheck() {
   if (document.getElementById('beastmode').checked) 
   {
         document.getElementById('mytextfield').style.visibility = 'visible'
         document.getElementById('mynumberfield').style.visibility = 'visible';
         document.getElementById("mytextfield").required = true;
         document.getElementById("mynumberfield").required = true;  
   }
   else
   {
      document.getElementById('mytextfield').style.visibility = 'hidden';
      document.getElementById('mynumberfield').style.visibility = 'hidden';
      document.getElementById("mytextfield").required = false;
      document.getElementById("mynumberfield").required = false; 
   } 

}

检查http://jsfiddle.net/rvPPg/ 以验证其工作原理

【讨论】：