1，radio分組?

只要name一樣，就是一組的，即一組中只能選擇一個，如下：?

代碼如下:
<span>group1:</span> <input type="radio" id="radio1" checked="checked" name="group1" />radio1 <input type="radio" id="radio2" name="group1" />radio2 <input type="radio" id="radio3" name="group1" />radio3 <span>group2:</span> <input type="radio" id="radio4" checked="checked" name="group2" />radio4 <input type="radio" id="radio5" name="group2" />radio5 <input type="radio" id="radio6" name="group2" />radio6

?

效果如下：?
?

2，獲取選中的radio節點?

使用jquery可以很方便做到，先選擇group，然后過濾出checked的，如下：?

代碼如下:
var group1 = $("[name='group1']").filter(":checked"); console.log(group1.attr("id"));

3，選中一個radio節點?

使用jquery設置checked屬性：?

? 代碼如下:
$("#radio2").attr("checked", "checked");

?

4，去選中一個radio節點?

移除checked屬性：?

代碼如下:
$("#radio1").removeAttr("checked");

?

這樣做的結果可能造成一組radio中沒有一個處于選中狀態。?

5，注冊選中去選中事件?

還是使用jquery的on函數來注冊change事件，如下：?

代碼如下:
$("[name='group1']").on("change", function (e) { console.log($(e.target).val()); } );

?

這樣只要group1中任何一個有選中的，就會觸發函數。

附：jquery中常見的對text，radio，checkbox獲取值，賦值的操作代碼-----

//獲取單選框radio中checked的值 //方式一 var sex=$("input[name='radio_sex']:checked").attr("value");//xxxx.value 是javascript取值方式，使用jquery取值可為：$("xxxx").val() 或者 $("xxxx").attr("value") //方式二 var sex=$("[name='radio_sex']").filter(":checked").attr("value"); $("#text_id").focus(function(){//code...}); //事件 當對象text_id獲取焦點時觸發 $("#text_id").blur(function(){//code...}); //事件 當對象text_id失去焦點時觸發 $("#text_id").select(); //使文本框的Vlaue值成選中狀態 $("input[name='radio_name'][value='要選中Radio的Value值'").attr("checked",true); //根據Value值設置Radio為選中狀態

?

?

jQuery獲取CheckBox選擇的Value值

//遍歷被選中CheckBox元素的集合 得到Value值 var hobby=''; //方式一 $("[name='hobby']").filter(":checked").each(function(){$(this).attr("value")+',';//可以使用this.value+','; 或者 $(this).val()+','; }); //方式二 $("input[name='hobby']:checked").each(function(){hobby+=this.value+','});$("#checkbox_id").attr("checked"); //獲取一個CheckBox的狀態(有沒有被選中,返回true/false) $("#checkbox_id").attr("checked",true); //設置一個CheckBox的狀態為選中(checked=true) $("#checkbox_id").attr("checked",false); //設置一個CheckBox的狀態為不選中(checked=false) $("input[name='checkbox_name']").attr("checked",$("#checkbox_id").attr("checked"));//根據3,4,5條，你可以分析分析這句代碼的意思 $("#text_id").val().split(","); //將Text的Value值以','分隔 返回一個數組 ?

轉載于:https://www.cnblogs.com/franson-2016/p/5607279.html

總結

以上是生活随笔為你收集整理的html中radio，checkbox值的获取、赋值、注册事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。