#javascript #html #jquery #css
Вопрос:
входное радио не скрывает содержимое, когда флажок снят, я не могу скрыть содержимое, когда переключатель входа радио снят
как я могу скрыть содержимое немаркированного радиовхода? нажатие на другой вход радио не отмечено, но содержимое не скрывается
$('#alternar').click(function () {
$('#prueba').toggle();
});
$('#alternarx').click(function () {
$('#pruebax').toggle();
});
/* commented out because this select doesn't appear in the HTML:
$(".placeholder").select2({
placeholder: "Make a Selection",
allowClear: true
});
*/
function uncheckAndCheck(event) {
// gets all radios with the name prefix like 'custom-radio-'
// and uncheck all of them
document.querySelectorAll("input[type='radio'][name^='custom-radio-']").forEach(radio => {
radio.checked = false;
});
// checks the radio that triggered the click event
event.target.checked = true;
} #prueba{
display:none
}
#pruebax{
display:none
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type="radio" class="new-control-input" name="custom-radio-1" id="alternarx" onclick="uncheckAndCheck(event)"/>
<div id="prueba"> Content1 </div>
<input type="radio" class="new-control-input" name="custom-radio-2" id="alternar" onclick="uncheckAndCheck(event)"/>
<div id="pruebax"> Content2 </div> Ответ №1:
Решение Джорджа работает, но зависит от того, что HTML никогда не меняется. Если вы добавите какой-либо элемент между флажком и div , это нарушит функциональность.
Чтобы ответить на ваш вопрос, связанный с JavaScript:
Нет необходимости проверять и снимать флажки с других радиовходов. Вам просто нужно придать им один и тот же name атрибут.
Во-вторых, ты .toggle() включаешь div букву «с click «. Возможно, именно поэтому они ведут себя так странно. Вы не проверяете, выбран переключатель или нет, и это приведет к их переключению, даже если вы нажмете на них, когда они уже выбраны. К счастью, вы можете просто слушать их change состояния.
В-третьих, вы можете удерживать селектор для цели переключателя, который вы хотите отобразить/скрыть в атрибуте данных, и использовать для всего этого одну функцию.
В-четвертых, зачем смешивать встроенные onclick атрибуты, когда вы используете jQuery? Просто прослушайте событие с помощью встроенных прослушивателей в jQuery.
//jQuery shorthand for $(document).ready(function(){ to be sure your DOM has loaded:
$(function() {
//run this on page load, too. Necessary because browsers will remember which one is checked on a page *refresh*, and hides the target divs initially when nothing is checked:
$checkedRB = $(".rbToggleDiv:checked");
if($checkedRB.length > 0) {
toggleVisibleDivs($checkedRB);
} else {
toggleVisibleDivs(false);
}
//both radio buttons have the same class as well, so you can listen for either of them to change states:
$(document).on("change", ".rbToggleDiv", function(e) {
//this = radio button that has changed
var $thisRB = $(this); //turn it into a jQuery object
if($thisRB.prop("checked")) { //only do something if this RB is checked
toggleVisibleDivs($thisRB);
}
});
function toggleVisibleDivs($targetRB) {
if ($targetRB === false) { //no target sent in
//hide all
$(".pruebaDiv").hide(); //hide all divs
} else { //target sent in
if ($targetRB.data("target-div")) { //make sure the data is set
var targetSelector = $targetRB.data("target-div"), //grab the string from the data object
$targetDiv = $(targetSelector); //use it to select the target div
if ($targetDiv.length > 0) { //make sure the div is selected
//hide all divs with the same class:
$(".pruebaDiv").hide();
//then, show only the one you want visible, the $targetDiv:
$targetDiv.show();
} else {
console.error("Div not found!", targetSelector);
}
} else {
//data not set:
console.error("Data was not set.");
}
}
}
}); .pruebaDiv {
display: none;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- if they have the same names, they will act as a radio button list, and will act accordingly. Also, you should really choose more descriptive IDs and names: -->
<input type="radio" class="rbToggleDiv" name="rb-toggle-div" id="alternarx" data-target-div="#prueba" />
<input type="radio" class="rbToggleDiv" name="rb-toggle-div" id="alternar" data-target-div="#pruebax" />
<!-- for the sanity of the user, I've moved these two divs next to each other below the radio buttons so they don't move around: -->
<div class="pruebaDiv" id="prueba"> Content1 </div>
<div class="pruebaDiv" id="pruebax"> Content2 </div> Ответ №2:
На самом деле это полностью возможно с помощью CSS. Вы можете использовать комбинатор соседних братьев и сестер , который влияет на элемент, следующий сразу за первым.
#prueba{
display: none;
}
#pruebax{
display: none;
}
input:checked #prueba,
input:checked #pruebax {
display: block;
} <input type="radio" class="new-control-input" name="custom-radio-1" id="alternarx" onclick="uncheckAndCheck(event)"/>
<div id="prueba"> Content1 </div>
<input type="radio" class="new-control-input" name="custom-radio-2" id="alternar" onclick="uncheckAndCheck(event)"/>
<div id="pruebax"> Content2 </div>