Значение jQuery, заданное в поле ввода nth-child?

У меня есть следующий html, и я хочу установить значение второго переключателя в проверяемом списке. Я знаю, что могу сделать это, используя атрибут id, но как я могу сделать то же самое с помощью селектора классов, как показано ниже, и привязки поля ввода, которое нужно проверить?Значение jQuery, заданное в поле ввода nth-child?

<ul class="myOptionList"> 
    <li> 
    <input id="1" type="radio" value="1" name="options"> 
    <label >one</label> 
    </li> 
    <li> 
    <input id="2" type="radio" value="2" name="options"> 
    <label >two</label> 
    </li> 
    ... 
</ul> 

$(".myOptionList li:nth-child(2)"); // how do i chain input field and set it as checked

источник

2016-10-12 adam78

'$ (". MyOptionList li: nth-child (2) "). Find ('input: radio'). Prop ('checked', true)' – guradio

@guradio почему бы и нет '$ (". MyOptionList li : nth-child (2) input: radio '). prop (' checked ', true) '? –

@DenisSheremet - потому что вопрос кажется *" как я ** цепочка ... *** "* – adeneo

Ниже приведен код, который может вам помочь.

HTML

<ul class="myOptionList"> 
    <li> 
    <input id="1" type="radio" value="1" name="options"> 
    <label >one</label> 
    </li> 
    <li> 
    <input id="2" type="radio" value="2" name="options"> 
    <label >two</label> 
    </li>

JQuery

$(".myOptionList li:nth-child(2)").find('input:radio').prop('checked',true);

Для версий JQuery до 1.6, использование:

$(".myOptionList li:nth-child(2)").find('input:radio').attr('checked', 'checked');

источник

2016-10-12 11:21:43

Ваше решение устанавливает флажок для всех кнопок * radio *. –

$(document).ready(function(){ 
 
$(".radio1 li:nth-child(4)").find('input:radio').prop('checked',true); 
 
$(".radio2 li:nth-child(2)").find('input:radio').prop('checked',true); 
 
$(".radio li:nth-child(1)").find('input:radio').prop('checked',true); 
 
});

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
    
 
    Fourth child selected: 
 
<ul class="radio1"> 
 
    <li> 
 
    <input id="1" type="radio" value="1" name="option1"> 
 
    <label >one</label> 
 
    </li> 
 
    <li> 
 
    <input id="2" type="radio" value="2" name="option1"> 
 
    <label >two</label> 
 
    </li> 
 
    <li> 
 
    <input id="3" type="radio" value="3" name="option1"> 
 
    <label >three</label> 
 
    </li> 
 
    <li> 
 
    <input id="4" type="radio" value="4" name="option1"> 
 
    <label >four</label> 
 
    </li> 
 
</ul> 
 
    Second child selected: 
 
<ul class="radio2"> 
 
    <li> 
 
    <input id="1" type="radio" value="1" name="option2"> 
 
    <label >one</label> 
 
    </li> 
 
    <li> 
 
    <input id="2" type="radio" value="2" name="option2"> 
 
    <label >two</label> 
 
    </li> 
 
    <li> 
 
    <input id="3" type="radio" value="3" name="option2"> 
 
    <label >three</label> 
 
    </li> 
 
    <li> 
 
    <input id="4" type="radio" value="4" name="option2"> 
 
    <label >four</label> 
 
    </li> 
 
</ul> 
 
    First child selected: 
 
<ul class="radio"> 
 
    <li> 
 
    <input id="1" type="radio" value="1" name="option"> 
 
    <label >one</label> 
 
    </li> 
 
    <li> 
 
    <input id="2" type="radio" value="2" name="option"> 
 
    <label >two</label> 
 
    </li> 
 
</ul> 
 
    
 
    First child selected:(same class name) 
 
    <ul class="radio"> 
 
    <li> 
 
    <input id="1" type="radio" value="1" name="option4"> 
 
    <label >one</label> 
 
    </li> 
 
    <li> 
 
    <input id="2" type="radio" value="2" name="option4"> 
 
    <label >two</label> 
 
    </li> 
 
</ul> 
 

 
</body> 
 
</html>

источник

2016-10-12 11:39:09

Даже использование:

$(".myOptionList li:nth-child(2)").find('input:radio').prop('checked',true);

работы, по-видимому, это только для случая.

Он установил флажок для всех радио до последнего, что он установлен только потому, что он последний.

Более смысл решение было бы использовать .last(), чтобы перейти непосредственно на опцию радио вы хотите установить:

$(function(){ 
 

 
    // Set the last checked radio 
 
    $('.myOptionList li > input[name="options"]').last().prop('checked', true) 
 
    
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="myOptionList"> 
 
    <li> 
 
    <input id="1" type="radio" value="1" checked name="options"> 
 
    <label >one</label> 
 
    </li> 
 
    <li> 
 
    <input id="2" type="radio" value="2" name="options"> 
 
    <label >two</label> 
 
    </li> 
 
    ... 
 
</ul>

Чтобы убедиться, что он работает правильно я установил первый радио проверено.

Но я предлагаю, чтобы изменить код таким образом, что вы выбираете радио на значение атрибута.

Преимущество этого в том, что ваш код будет более понятным и понятным и измененным, и даже если порядок радиостанций изменится, он все равно будет работать.

источник

2016-10-12 11:48:29

Значение jQuery, заданное в поле ввода nth-child?

ответ

Смежные вопросы