顯示/隱藏2（必填）基於複選框的表單域

好吧，我試圖根據複選框選擇顯示2個表單域。這2個表單域是必需的。所以基本上，當選擇複選框時，我需要顯示字段並讓他們需要。否則，他們隱藏，因此不是必需的。我有show hide sorta工作。它在取消選擇時不可靠隱藏（選擇組中的另一個複選框）。當他們被隱藏時，他們仍然是必需的，所以我得到一個不錯的錯誤...顯示/隱藏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'; 
} 

}

來源

2013-10-03 Muttface

試圖澄清你的問題，我很難理解你想要什麼。我的文本字段和我的數字字段值是否必須基於選中的輸入值？

好的，這應該工作。

$("#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/

我只是關閉了一些標記，刪除一些不必要的代碼。

來源

2013-10-03 05:53:44

複選框只是「激活」這些領域。所以如果你選擇手動的方法，不需要這兩個隱藏的字段。而如果選擇beastmode，則需要這些字段中的信息。對不起，沒有更清楚。謝謝！ – Muttface

在RequiredFieldValidator中使用驗證組，並在選中複選框時調用此方法。在你的代碼

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/

來源

2013-10-03 06:06:18 Manu

使用此代碼

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

，以驗證它是如何工作

來源

2013-10-03 06:17:23 zzlalani

顯示/隱藏2（必填）基於複選框的表單域

回答

相關問題