#javascript #jquery #html
#javascript #jquery #HTML
Вопрос:
Я планирую разрешить пользователю при нажатии на одну из переключателей A и B:
A — позволит пользователю проверить флажок проверки с помощью javascript, заменившего функцию onclick checkRequired() , где функция удалит «требуется» из ввода после его проверки.
B — позволит пользователю проверять только 1 флажок с помощью функции checkOne(), заменил функцию checkRequired()
Проблема в том, что я не понимаю, почему javascript продолжает использовать функцию checkOne(), даже если я проверил весь код и синтаксис, даже инструмент разработчика из браузера Google Chrome ПОКАЗАЛ, ЧТО ФУНКЦИЯ БЫЛА ЗАМЕНЕНА НА checkRequired() ПОСЛЕ ТОГО, КАК ПЕРЕКЛЮЧАТЕЛЬ A УСТАНОВЛЕН. Логически говоря, ОНА ДОЛЖНА РАБОТАТЬ ХОРОШО, НО по какой-то причине она вообще не работает.
function checkRequired() {
var n = $( "input:checkbox:checked" ).length;
var requiredCheckboxes = $(':checkbox[required]');
var chkboxes = $(':checkbox');
if(n < 1) {
chkboxes.attr('required', 'required');
} else {
requiredCheckboxes.removeAttr('required');
}
}
function checkOne() {
$('.regid-chkbox').on('change', function() {
$('.regid-chkbox').not(this).prop('checked', false);
});
}
function editMeal() {
var editBrand = document.getElementById("radio-edit-meal-brand");
var editInfo = document.getElementById("radio-edit-meal-info");
if (editBrand.checked){
$('.regid-chkbox').removeAttr('onclick');
$('.regid-chkbox').attr('onclick', 'checkRequired();');
} else if (editInfo.checked) {
/* Making the checkbox only one can be checked */
$('.regid-chkbox').removeAttr('onclick');
$('.regid-chkbox').attr('onclick', 'checkOne();');
}
}
HTML-коды:
<div class="logmod__tab lgm-2" id="ver-form-res">
<form method="POST" action="">
<div class="logmod__heading">
<span class="logmod__heading-subtitle">Enter your information to verify and <strong>edit the meal.</strong></span>
</div>
<div class="logmod__form">
<!-- Upload Image Section -->
<center>
<div id="wrapper" class="img-container">
<img id="output_image" src="image/e2.png" class="preview-img"/>
<div class="upload-text-container">
<div class="upload-text"><i class="fa fa-camera" aria-hidden="true"></i><br> Click here to Upload </div>
</div>
<input type="file" onchange="preview_image(event)" style="display: none;" name="bran-img" id="bran-image-reg">
</div>
</center>
<div class="sminputs">
<div class="input full" style="height:auto!important;">
<label class="string optional" for="user-account-code-dis">Edit Categories*</label>
<label class="radio-container"> EDIT MEAL'S BRAND
<input required type="radio" checked="checked" value="0" id="radio-edit-meal-brand" name="meal-edit" onclick="editMeal()">
<span class="checkmark-radio"></span>
</label>
<label class="radio-container"> EDIT MEAL'S INFO
<input required type="radio" value="1" id="radio-edit-meal-info" name="meal-edit" onclick="editMeal()">
<span class="checkmark-radio"></span>
</label>
</div>
</div>
<div class="sminputs">
<div class="input full">
<label class="string optional" for="user-account-code-res">Account Code*</label>
<input class="string optional" name="enable-acccode" maxlength="8" minlength="8" id="user-account-code-res" placeholder="Account Code" type="password" size="8" />
</div>
</div>
<div class="sminputs">
<div class="input string optional">
<label class="string optional" for="user-pw-res">Password *</label>
<input class="string optional first-pw" name="enable-pw" maxlength="255" id="user-pw-res" onkeyup="check_verlist_res();" placeholder="Password" type="password" size="50" />
</div>
<div class="input string optional">
<label class="string optional" for="user-pw-repeat-res">Repeat password *</label>
<input class="string optional" name="enable-pw-repeat" maxlength="255" id="user-pw-repeat-res" onkeyup="check_verlist_res();" placeholder="Repeat password" type="password" size="50" />
<span class="hide-password" id="toggle-pw-res" onclick="togglePassResA();">SHOW</span>
</div>
</div>
<div class="sminputs" id="edit-brand-meal">
<div class="input full" style="height:80px!important">
<label class="string optional" for="vercode-role">BRAND *</label>
<select class="role-select" id="brand-type-meal" name="meal-edit-brand" style="width:30vw; height:4vh;">
<option value="" selected disabled>BRAND</option>
<!-- call out the brand value -->
';
$BRANDTYPE = "SELECT * FROM meal_brand WHERE active = 1";
$result = $con->query($BRANDTYPE);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo '
<option value="'.$row["brand_id"].'">' .$row["brand_name"]. '</option>
';
}
}
echo
'</select>
</div>
</div>
<div class="sminputs" id="edit-info-meal-1">
<div class="input input string optional">
<label class="string optional" for="meal-name-edit">Meal Name *</label>
<input class="string optional meal-name" name="meal-name-edit" maxlength="255" id="meal-name-edit" placeholder="Meal Name"/>
</div>
<div class="input input string optional">
<label class="string optional" for="meal-quantity-edit">Meal Default Quantity *</label>
<input class="string optional meal-quantity" type="number" min="1" step="1" onkeypress="validate(event)" name="meal-quantity-edit" id="meal-quantity-edit" placeholder="00"/>
</div>
</div>
<div class="sminputs" id="edit-info-meal-2">
<div class="input input string optional" style="height:80px!important">
<label class="string optional" for="meal-edit-info-brand">BRAND *</label>
<select class="role-select" id="brand-type-meal-info" name="meal-edit-info-brand" style="width:30vw; height:4vh;">
<option value="" selected disabled>BRAND</option>
<!-- call out the brand value -->
';
$BRANDTYPE = "SELECT * FROM meal_brand WHERE active = 1";
$result = $con->query($BRANDTYPE);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo '
<option value="'.$row["brand_id"].'">' .$row["brand_name"]. '</option>
';
}
}
echo
'</select>
</div>
<div class="input input string optional" style="height:80px!important">
<label class="string optional" for="meal-price-edit">Meal Price *</label>
<input class="string optional meal-price" type="number" step="0.25" min="1" onkeypress="validate(event)" name="meal-price-edit" id="meal-price-edit" placeholder="RM 0.00"/>
</div>
</div>
<div class="sminputs" id="edit-info-meal-3">
<div class="input full" style="height:30vh!important;">
<label class="string optional" for="meal-details-edit">Meal Details*</label>
<textarea style="height:20vh!important;width:68vw!important" class="string optional meal-details" type="textarea" name="meal-details-edit" id="meal-details-edit" placeholder="Meal Details" /></textarea>
</div>
</div>
<div class="simform__actions">
<input disabled class="sumbit" name="submit-list-edit-meal" style="font-family:oswald!important;" type="submit" id="submit-res" value="Confirm Edit" />
<div id="error-message-res" style="font-size:17px;"></div>
<span class="simform__actions-sidetext">By editing the brand, you are here and agree our <a class="special" onclick="return false;" role="link">Terms amp; Conditions</a></span>
</div>
</div>
</div>
Ожидаемый результат должен работать при этих условиях, но по какой-то причине он не работает, даже если инструмент разработчика из Chrome показал, что функция уже заменена.
Ответ №1:
РЕДАКТИРОВАТЬ 2:
Я нашел проблему. checkOne Вы устанавливаете onChange событие, и мы никогда не отменяем его. Вот почему проверка сохраняется даже при переключении переключателей.
Попробуйте:
function editMeal() {
var editBrand = document.getElementById("radio-edit-meal-brand");
var editInfo = document.getElementById("radio-edit-meal-info");
if (editBrand.checked){
$('.regid-chkbox').off('click');
$('.regid-chkbox').off('change');
$('.regid-chkbox').on('click', checkRequired);
} else if (editInfo.checked) {
/* Making the checkbox only one can be checked */
$('.regid-chkbox').off('click');
$('.regid-chkbox').off('change');
$('.regid-chkbox').on('click', checkOne);
}
}
Редактировать:
Я сделал быстрый макет фрагмента кода, и, похоже, он работает так, как вы хотели. Есть ли какое-либо другое место, где вы изменяете обработчики событий, которые могут вызвать вашу проблему?
function checkRequired() {
console.log('Check required');
}
function checkOne() {
console.log('check one');
}
function editMeal() {
var editBrand = document.getElementById("radio-edit-meal-brand");
var editInfo = document.getElementById("radio-edit-meal-info");
if (editBrand.checked){
$('.regid-checkbox').off('click');
$('.regid-checkbox').on('click', checkRequired);
} else if (editInfo.checked) {
/* Making the checkbox only one can be checked */
$('.regid-checkbox').off('click');
$('.regid-checkbox').on('click', checkOne);
}
}
$(document).ready(() => {
$('input[type="radio"]').on('change', editMeal);
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="radio" id="radio-edit-meal-brand" name="edit-meal"><label for="radio-edit-meal-brand">Check Required</label>
<input type="radio" id="radio-edit-meal-info" name="edit-meal"><label for="radio-edit-meal-info">Check One</label>
<input type="checkbox" class="regid-checkbox">
</form> Оригинал:
Может быть, использовать синтаксис обработчика событий вместо установки attr onclick ?
function editMeal() {
var editBrand = document.getElementById("radio-edit-meal-brand");
var editInfo = document.getElementById("radio-edit-meal-info");
if (editBrand.checked){
$('.regid-chkbox').off('click');
$('.regid-chkbox').on('click', checkRequired);
} else if (editInfo.checked) {
/* Making the checkbox only one can be checked */
$('.regid-chkbox').off('click');
$('.regid-chkbox').on('click', checkOne);
}
}
Комментарии:
1. Пробовал, он все еще использует функцию checkOne() .
2. Хорошо, я понял, что этот странный сценарий произойдет, как только функция будет заменена на checkOne(), и если вы установили флажок хотя бы один раз, в противном случае, если функция заменена на checkOne(), и вы еще не установили ни одного флажка, javascript, похоже, не будет использовать функцию checkOne(), но функцияcheckRequired() при замене ее на функцию checkRequired() .
3. @MEMYSELF Я думаю, что нашел проблему, пожалуйста, дайте мне знать, если обновленное (редактирование 2) изменение устраняет проблему
Ответ №2:
Ваш код должен работать, если вы исправите атрибут на be .attr('onClick') вместо .attr('onclick') . Это чувствительно к регистру.
Хотя, как указал kht, может иметь больше смысла просто использовать on('click') функцию вместо этого.
Комментарии:
1. Пробовал, он все еще использует функцию checkOne() . >_<
2. Вы добавите HTML?
3. Предпочтительно связанный
4. Он содержит некоторый PHP-код, я надеюсь, вы не будете возражать против этого. Отредактировано в сообщении.
5. Можете ли вы поместить HTML после того, как он был обработан PHP?
Ответ №3:
Подобно ответу, опубликованному kht, даже исходный немодифицированный Javascript OP, опубликованный, работает, как ожидалось.
function checkRequired() {
console.log('checkRequired');
var n = $("input:checkbox:checked").length;
var requiredCheckboxes = $(':checkbox[required]');
var chkboxes = $(':checkbox');
if (n < 1) {
chkboxes.attr('required', 'required');
} else {
requiredCheckboxes.removeAttr('required');
}
}
function checkOne() {
console.log('checkOne');
$('.regid-chkbox').on('change', function() {
$('.regid-chkbox').not(this).prop('checked', false);
});
}
function editMeal() {
var editBrand = document.getElementById("radio-edit-meal-brand");
var editInfo = document.getElementById("radio-edit-meal-info");
if (editBrand.checked) {
$('.regid-chkbox').removeAttr('onclick');
$('.regid-chkbox').attr('onclick', 'checkRequired();');
} else if (editInfo.checked) {
/* Making the checkbox only one can be checked */
$('.regid-chkbox').removeAttr('onclick');
$('.regid-chkbox').attr('onclick', 'checkOne();');
}
}
$(document).ready(() => {
$('input[type="radio"]').on('change', editMeal);
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="radio" id="radio-edit-meal-brand" name="edit-meal"><label for="radio-edit-meal-brand">Check Required</label>
<input type="radio" id="radio-edit-meal-info" name="edit-meal"><label for="radio-edit-meal-info">Check One</label>
<input type="checkbox" class="regid-chkbox" />
</form>