Please tell me how to use jQuery to get its html content by clicking on the label and at the same time to get the value attribute of <input>

 <div class="radio_buttons"> <div> <input type="radio" name="option" value="1" /> <label for="radio1">Текст radio кнопки №1</label> </div> <div> <input type="radio" name="option" value="2" /> <label for="radio2">radio кнопка №2</label> </div> <div> <input type="radio" name="option" value="3" /> <label for="radio3">Еще текст radio кнопки №3</label> </div> </div>

Those. when you click on the first button, you should get the value "1" and html "Text of the radio button number 1

    2 answers 2

     $(document).on('click', 'input[type=radio]', function(){ var inputValue = $(this).val(); var labelText = $(this).next('label').html() console.log('Значение:' + inputValue + ', текст метки: ' + labelText); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="radio_buttons"> <div> <input type="radio" name="option" value="1" /> <label for="radio1">Текст radio кнопки №1</label> </div> <div> <input type="radio" name="option" value="2" /> <label for="radio2">radio кнопка №2</label> </div> <div> <input type="radio" name="option" value="3" /> <label for="radio3">Еще текст radio кнопки №3</label> </div> </div>

    next - Returns items that are immediately after each of the selected items. In this case, it is a label label that comes right after the button is pressed.

       $(function(){ $('.radio_buttons input[type="radio"]').on('click', function(e){ // Слушаем клик на кнопки // this.value - значение кнопки // $(this).next() - следующий элемент, т. е. label; html() - содержимое label'а $('#log').html(`Input value: ${this.value}<br />\nLabel value: ${$(this).next().html()}`); }); }); 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="radio_buttons"> <div> <input type="radio" name="option" value="1" /> <label for="radio1">Текст radio кнопки №1</label> </div> <div> <input type="radio" name="option" value="2" /> <label for="radio2">radio кнопка №2</label> </div> <div> <input type="radio" name="option" value="3" /> <label for="radio3">Еще текст radio кнопки №3</label> </div> </div> <hr /> <div id='log'></div>