js natif, récapitulatif radio de la boîte de sélection unique jquery (obtenir la valeur, définir la valeur sélectionnée par défaut, le style)

Récapitulatif radio de la boîte de sélection unique

1. Capture d'écran du style de page:

<div class="radio-inline">
  <input type="radio"  name="killOrder" id="killOrder1" value="1"/>
  <label for="killOrder1">是</label>
</div>
<div class="radio-inline">
  <input type="radio"  name="killOrder" id="killOrder2" value="0" checked/>
  <label for="killOrder2">否</label>
</div>

Utilisez l'étiquette d'étiquette pour cliquer sur le texte pour sélectionner la case radio ou désélectionner la case radio 

Deux façons d'utiliser l'étiquette:    https://blog.csdn.net/qq_40015157/article/details/110850331

 

Deux, js natif

1. js obtient nativement la valeur sélectionnée

var tesObj = document.getElementsByName("killOrder");
//获取选中的值
for(var i=0; i < tesObj.length; i++){
 	if (tesObj[i].checked==true){
         alert(tesObj[i].value+'  是选中的value值');
         break;
    }
}

2. Les paramètres natifs js sont sélectionnés

var tesObj = document.getElementsByName("killOrder");

//设置value值为0选中
for(var i=0; i < tesObj.length; i++){
 	if (tesObj[i].value=="0"){
           tesObj[i].checked = true;
           break;
    }
}

Trois, jquery

1. Obtenez la valeur

$("input[name='killOrder']:checked").val();

$('input:radio:checked').val();

$("input[type='radio']:checked").val();

$(":radio[checked]").each(function(radio){alert($(this).val());

 

Remarque: Parfois, attr () ne peut pas fonctionner. La différence entre attr () et prop () peut être trouvée dans l'article.   https://blog.csdn.net/qq_40015157/article/details/110823718

 

2. Réglez la première radio sur la valeur sélectionnée:

$('input:radio:first').prop('checked', 'checked');

$('input:radio:first').prop('checked', true);


$('input:radio:first').attr('checked', 'checked');

$('input:radio:first').attr('checked', true);

 

3. Réglez la dernière radio comme valeur sélectionnée:

$('input:radio:last').prop('checked', 'checked');

$('input:radio:last').prop('checked', true);


$('input:radio:last').attr('checked', 'checked');

$('input:radio:last').attr('checked', true);

 

4. Définissez n'importe quelle radio comme valeur sélectionnée en fonction de la valeur d'index:

$('input:radio').eq(索引值).prop('checked', true);//索引值=0,1,2....

$('input:radio').slice(1,2).prop('checked', true);


$('input:radio').eq(索引值).attr('checked', true);//索引值=0,1,2....

$('input:radio').slice(1,2).attr('checked', true);

 

5. Réglez la radio sur la valeur sélectionnée en fonction de la valeur

$("input:radio[value='2']").prop('checked', true);

$("input[value='1']").prop('checked', true);

$("input[name='killOrder'][value='1']").prop("checked", "checked");

let v = 1;//变量
$("input[name='killOrder'][value='" + v + "']").prop("checked", true);


$("input:radio[value='2']").attr('checked', true);

$("input[value='1']").attr('checked', true);

 

6. Supprimez la radio avec une valeur de 2

$("input:radio[value='2']").remove();

 

7. Supprimez la première radio

$("input:radio").eq(索引值).remove();//索引值=0,1,2....


//如删除第3个radio:$("input:radio").eq(2).remove();

 

8. Traversez la radio

$('input:radio').each(function(index,domEle){

     //写入代码

});

 

9. Modifiez le style du bouton radio

input[type="radio"] + label::before {
    content: "\a0";
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    border-radius: 50%;
    text-indent: .15em;
    margin-bottom: 4px;
    border: 1px solid #CCCCCC;
}
input[type="radio"]:checked + label::before {
    background-color: #4A90E2;
    background-clip: content-box;
    padding: 2px;
}
input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
.radio-inline{
    padding-left: 0;
}
input[type=radio][disabled]:checked + label::before{
    background-color:#CCCCCC;
    background-clip: content-box;
    padding: 2px;

}

Récapitulatif de la case à cocher:    https://blog.csdn.net/qq_40015157/article/details/110819778 

Sélectionnez tout inversé: https://blog.csdn.net/qq_40015157/article/details/110661715

https://blog.csdn.net/qq_40015157/article/details/80693777

Zone de saisie:  https://blog.csdn.net/qq_40015157/article/details/80692543