Выбор переключателей A для добавления другого ввода в jquery / javascript

Я пытаюсь изучить jQuery, применяя полученные знания на практике. Итак, вот моя проблема с кодированием.

У меня есть две кнопки, одна «да» и одна «нет». После выбора переключателя «Да» должен появиться новый ввод текста.

мой jquery ниже:

$(document).ready(function(){ 
    $("#many").hide();
var isChecked = $("#dform input" ).change(function() {
    $("input[name=question]:checked", "#dform").val();  
  if(isChecked == yes){
    $("#many").show();
  }else {$("#many").hide();}
   });
});

мой кодовое перо

Я использовал этот ответ добавил функцию значения в переменную, а затем использовал ее в условном выражении. Я помещаю значение $("input[name=question]:checked", "#dform").val(); в предупреждение, чтобы убедиться, что значение, прикрепленное к переключателю «да», было записано. Однако, когда я помещаю функцию .val () в переменную и использую ее в условном выражении, она не работает.

Правильно ли я настроил JQuery?


javascript html jquery radio-button textinput
person hnewbie    schedule 21.07.2016    source источник
comment
Правильно ли я настроил JQuery? ... нажмите F12 на клавиатуре и посмотрите на console. Немедленно ответит на этот вопрос, прочитав сообщения об ошибках.   -  person charlietfl    schedule 21.07.2016
comment
Я нажал F12 и посмотрел на консоль. Я вижу большое белое пространство.   -  person hnewbie    schedule 21.07.2016
comment
должны видеть красные сообщения об ошибках, если этот код действительно находится на вашей странице и внутри тега скрипта   -  person charlietfl    schedule 21.07.2016
comment
Чтобы переменная IsChecked когда-либо получала значение, ваша функция должна возвращать значение, я не уверен, поддерживают ли это события изменения. Пожалуйста, посмотрите мой ответ, так как выполнение изменения в событии при изменении имеет для меня больше смысла   -  person 2b77bee6-5445-4c77-b1eb-4df3e5    schedule 21.07.2016
comment
@ user3845646 он уже имеет значение, и это объект jQuery.   -  person charlietfl    schedule 21.07.2016
comment
ой. не видя их. мой код весь в коде.   -  person hnewbie    schedule 21.07.2016
comment
codepen должен подавлять ошибку, потому что yes не определен и выдает ошибку   -  person charlietfl    schedule 21.07.2016
comment
Ох, ладно. но я не понимаю, почему yes было бы undefined, хотя я установил yes в качестве значения в html.   -  person hnewbie    schedule 21.07.2016

Ответы (5)


arrow_upward
0
arrow_downward

Пожалуйста, замените свой js на это:

$(document).ready(function(){ 
    $("#many").hide();
    $("#dform input" ).change(function() {
    var val = $("input[name=question]:checked", "#dform").val();  
     if (val == "yes") {
       $("#many").show();
     } else {
       $("#many").hide();
     }
   });
});

Я уверен, что его можно было бы почистить больше, но он все равно работает. С настройкой jQuery все в порядке. Кодовое перо: http://codepen.io/anon/pen/GqxGmp

person 2b77bee6-5445-4c77-b1eb-4df3e5    schedule 21.07.2016
comment
почему бы yes быть неопределенным? - person hnewbie; 21.07.2016
comment
@hnewbie Вы правы! мой оригинал не включал атрибут: checked, поэтому при загрузке страницы значение будет неопределенным. Позвольте мне это отредактировать! - person 2b77bee6-5445-4c77-b1eb-4df3e5; 21.07.2016

arrow_upward
1
arrow_downward

Попробуйте что-нибудь вроде этого

<script>
$(document).ready(function () {

    $("#many").hide();

    $("input[name='question']").click(function () {

        if ($('#yes').is(':checked')) { $("#many").show(); } 

        else { $("#many").hide(); }
    });
});
</script>
person Shrikant Mavlankar    schedule 21.07.2016
comment
Вы можете добиться этого с помощью простых функций jQuery. Сообщите мне, работает ли это для вас - person Shrikant Mavlankar; 21.07.2016

arrow_upward
1
arrow_downward

Вы немного сбились с пути. Вам не нужно называть обработчика onChange (var isChecked...), и я думаю, что это вас смущает. Я бы попробовал что-то еще в этом роде:

$(document).ready(function(){ 
  $("#many").hide();
  $("#dform input[name=question]").change(function() {
    if ($('#dform input[name=question]:checked').attr('value') == 'yes') {
      $("#many").show();
    } else {
      $("#many").hide();
    }
  });
});
person LGFaler    schedule 21.07.2016
comment
поэтому, поместив обработчик onChange в переменную, сделали значение yes неопределенным? - person hnewbie; 21.07.2016
comment
@hnewbie Я не уверен, что понимаю ваш вопрос. Вы можете перефразировать? - person LGFaler; 21.07.2016
comment
Поместив $("input[name=question]:checked", "#dform").val(); в переменную, которую я установил, isChecked, сделало ли это значение, захваченное функцией .val (), неопределенным? - person hnewbie; 21.07.2016
comment
@hnewbie, если бы ты сделал var isChecked = $('#dform input[name=question]:checked').val();, это было бы прекрасно. Однако в вашем исходном коде было var isChecked = $("#dform input" ).change(function() { .... Позже вы попытались сослаться на isChecked, но эта переменная была назначена только вашему обработчику, а не фактическому результату, который вы искали. - person LGFaler; 21.07.2016

arrow_upward
1
arrow_downward

Попробуйте это, чтобы скрыть и показать элемент

$(document).ready(function(){ 
$("#many").hide();
 $("#dform input" ).change(function() {
     $("#many").show();
  });
  $("#no").change(function(){
    $("#many").hide();
  })
});

измените html как:

<input type="radio" name="question" id="no" value="no" checked>
person Syed Aqeel    schedule 21.07.2016

arrow_upward
1
arrow_downward

Есть другой способ сделать это, простой способ сделать это с помощью метода JQuery addClass и Remove Class.

**HTML**
<h4>
Click on button to toggle
</h4>
<div style="padding:10px;">
<button class="show btn">Show</button>
<button class="hide btn">Hide</button>

</div>
<div>
<input type="text" id="name" class="displayN"/>
</div>

JQuery

$(document).ready(function(){

$(".show").click(function(){
    $("#name").addClass('displayB').removeClass("displayN");
});

$(".hide").click(function(){
    $("#name").addClass("displayN").removeClass("displayB");
})

});

Рабочий пример: https://jsfiddle.net/mshyam83/u3wfpznn/

person Shyam Mohan    schedule 21.07.2016