這是我想要做的：我有一個表單，上面有一個復選框。選中該復選框時，我希望顯示一些其他字段，未選中時我希望不顯示這些字段。同樣在提交表單后出現某種錯誤（例如該人尚未確認他們不是機器人）我希望復選框保持選中狀態，如果它之前被選中（當然，附加字段仍然是顯示是否選中）。我嘗試了幾種不同的方法：使用數據切換在復選框的單擊功能上使用 JavaScript使用 jQuery 道具方法使用 jQuery :checked 選擇器（參考 3. 和 4. https://www.tutorialrepublic.com/faq/how-to-check-a-checkbox-is-checked-or-not-using-jquery.php）所有方法出現的一個問題是，在提交有錯誤的表單后，即使選中了復選框，也不會顯示其他字段。 <div class="form-group"> <label for="additionalFields" class="checkbox-inline ml-1 mb-0">Show additonal fields</label> <input class="align-middle" type="checkbox" name="additionalFields" value="additionalFields" data-toggle="collapse" data-target="#fields" <?php if (isset($_POST['additonalFields'])) echo 'checked="checked"'; ?>> </div> <div class="form-group collapse in row" id="fields"> <div class="col-sm-6"> <label class="form-control-label ml-1 mb-xs-form" for="fieldOne">Field 1:</label> <input class="form-control" type="text" id="fieldOne" name="fieldOne" maxlength="100" placeholder="Field 1" <?php if ($_POST && ($suspect || $errors || !($response->success))) { echo 'value="' . htmlentities($fieldOne) . '"'; } ?>> </div> <div class="col-sm-6"> <label class="form-control-label ml-1 mt-3 mt-sm-0" for="fieldTwo">Field 2</label> <input class="form-control" type="text" id="fieldTwo" name="fieldTwo" maxlength="100" placeholder="Field 2" <?php if ($_POST && ($suspect || $errors || !($response->success))) { echo 'value="' . htmlentities($fieldTwo) . '"'; } ?>> </div> </div><!-- form-group -->上面的代碼使用了數據切換。使用 JavaScript 或 jQuery 時，我使用的是 display: none; 并顯示：flex；顯示和隱藏附加字段。
2 回答
手掌心
TA貢獻1942條經驗 獲得超3個贊
我沒有看到任何 jQuery，但我認為你的意思是
$(function() {
$("[name=additionalFields]").on("change",function() {
$($(this).data("target")).toggle(this.checked);
}).trigger("change"); // initialise on load
})
一只甜甜圈
TA貢獻1836條經驗 獲得超5個贊
在 html 重新加載時，如果單擊復選框，您需要手動預定義 js 事件的作用。如果您的意思是使用 data-toggle 是使用引導手風琴，那么您需要將類“show”添加到事件數據目標以顯示額外的輸入字段。所以試試這個：
<div class="form-group">
<label for="additionalFields" class="checkbox-inline ml-1 mb-0">Show additonal fields</label>
<input class="align-middle" type="checkbox" name="additionalFields" value="additionalFields" data-toggle="collapse" data-target="#fields" <?php if (isset($_POST['additonalFields'])) echo 'checked="checked"'; ?>>
</div>
<div class="form-group collapse in row <?php if (isset($_POST['additonalFields'])) echo 'show'; ?>" id="fields">
<div class="col-sm-6">
<label class="form-control-label ml-1 mb-xs-form" for="fieldOne">Field 1:</label>
<input class="form-control" type="text" id="fieldOne" name="fieldOne" maxlength="100" placeholder="Field 1"
<?php
if ($_POST && ($suspect || $errors || !($response->success))) {
echo 'value="' . htmlentities($fieldOne) . '"';
}
?>>
</div>
<div class="col-sm-6">
<label class="form-control-label ml-1 mt-3 mt-sm-0" for="fieldTwo">Field 2</label>
<input class="form-control" type="text" id="fieldTwo" name="fieldTwo" maxlength="100" placeholder="Field 2"
<?php
if ($_POST && ($suspect || $errors || !($response->success))) {
echo 'value="' . htmlentities($fieldTwo) . '"';
}
?>>
</div>
- 2 回答
- 0 關注
- 320 瀏覽
添加回答
舉報
0/150
提交
取消