html中radio,checkbox值的獲取、賦值、注冊事件

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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/287282.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/287282.shtml
英文地址,請注明出處:http://en.pswp.cn/news/287282.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

ObjectAnimator屬性動畫應用demo

感謝慕課網--eclipse_xu 布局文件&#xff1a;activity_main.xml 1 <FrameLayout xmlns:android"http://schemas.android.com/apk/res/android"2 xmlns:tools"http://schemas.android.com/tools"3 android:layout_width"match_parent"…

java數據庫防火墻,數據庫centos7防火墻導致java程序訪問mongodb3.0.1時報錯的問題分析...

環境描述&#xff1a;數據庫&#xff1a;mongodb3.0.1數據庫系統&#xff1a;centos7,(虛擬機&#xff0c;最小安裝)數據庫驅動&#xff1a;mongo-Java-driver-3.0.0.jar問題描述&#xff1a;shell環境下用mongo客戶端程序能正常連接mongod&#xff0c;但java程序始終報錯。查看…

Android之提示androidx.recyclerview.widget.LinearLayoutManager@51ddcd is already attached to a RecyclerV

1 問題 我有2個recycleView,但是用的同一個線性布局導致錯誤如下 LayoutManager androidx.recyclerview.widget.LinearLayoutManager@51ddcd is already attached to a RecyclerView: androidx.recyclerview.widget.RecyclerView{dfe1682 VFED..... ......I. 0,0-0,0 #7f090…

今晚在線解讀|2021-2022 .NET 中國開發者生態調查報告

點擊藍字關注我們作為一名 .NETer&#xff0c;你就職于怎樣規模的公司&#xff1f;所屬什么行業領域&#xff1f;平時使用哪些快速開發框架&#xff1f;產品方向及收費模式又是怎樣的&#xff1f; 作為一名開發者&#xff0c;你從業已有幾年&#xff1f;平時加班多嗎&#xff1…

實現網站驗證碼切換功能

實現網站驗證碼切換功能 一、樣例 樣例1、 樣例2、 二、實現原理 三、實現代碼 com.fry.servlet.VerifyCodeServlet 1 package com.fry.servlet;2 3 import javax.imageio.ImageIO;4 import javax.servlet.ServletException;5 import javax.servlet.annotation.WebServlet;6 im…

校園春色關不住,怎奈何唯有花枝俏,不見賞花人?

受新冠肺炎疫情的影響&#xff0c;直至今天&#xff08;2020年4月16日&#xff09;&#xff0c;各大學依然是人去樓空&#xff0c;我的大學也不例外。春天來了&#xff0c;本應是校園春色關不住&#xff0c;卻怎奈何唯有花枝俏&#xff0c;不見賞花人&#xff1f;這也正應了那句…

CSDN是如何讓我副業月入過萬的?

始 我跟 CSDN 的緣分要從 2011 年說起&#xff0c;當時我正上高二&#xff0c;當時好像是在搞鼓 MFC。當時家里有了第一臺電腦&#xff0c;我也再也不用去黑網吧去敲代碼了&#xff0c;在家搜索資料的時候出現在我眼簾之中&#xff0c;并且對我有幫助的基本上都是 CSDN 上的內…

Java Servlet API中文說明文檔

Java Servlet API中文說明文檔 目 錄 1.... Servet資料 1.1 緒言 1.2 誰需要讀這份文檔 1.3 Java Servlet API的組成 1.4 有關規范 1.5 有關Java Servlets 1.6 Java Servlet概論 1.7 Servlet的生命周期 1.8 Servlet的解析和載入 1.9 …

MSMQ消息廣播

安裝配置MSMQ消息廣播&#xff0c;并驗證是否可以發送廣播消息&#xff0c;過程實錄。1. 安裝MSMQ with broadcasting support選擇安裝“消息隊列”&#xff0c;并在子選項中選擇“多播支持”一起安裝。2. 注冊表修改MulticastBindIPIf Message Queueing found multiple IP add…

Android之解決ScrollView包裹了兩個RecyclerView導致滑動沖突問題

1 問題 ScrollView包裹了兩個RecyclerView導致滑動沖突問題 2 解決辦法 給ScrollView和兩個RecyclerView分別設置isNestedScrollingEnabled屬性為false scrollview.isNestedScrollingEnabled falsenotInstallRv.isNestedScrollingEnabled falseinstallRv.isNestedScrolling…

【操作系統】操作系統不可怕,重裝系統不求人,因為我們是GISer!

GISer不僅可以用意念操作軟件,而且可以輕松自如重裝系統!今天我們分享用U制作啟動盤,并安裝Win7系統。 一、系統安裝必備 優盤(現在的U盤內存都比較大,大于4G即可)電腦店操作系統(Win7 64位專業版)二、安裝過程 1、系統啟動盤制作 下載電腦店優盤制作軟件,安裝,運行…

php 依賴倒置原則,手擼golang 架構設計原則 依賴倒置原則

golang 架構設計原則 依賴倒置原則緣起最近復習設計模式拜讀譚勇德的<>該書以java語言演繹了常見設計模式本系列筆記擬采用golang練習之依賴倒置原則依賴倒置原則(Dependence Inversion Principle, DIP)指設計代碼結構時&#xff0c;高層模塊不應該依賴底層模塊&#xff…

看聊天記錄都學不會C語言?太菜了吧》(16)我一直以為校花很漂亮,直到我叫了她一聲...

若是大一學子或者是真心想學習剛入門的小伙伴可以私聊我&#xff0c;若你是真心學習可以送你書籍&#xff0c;指導你學習&#xff0c;給予你目標方向的學習路線&#xff0c;無套路&#xff0c;博客為證。 本系列文章將會以通俗易懂的對話方式進行教學&#xff0c;對話中將涵蓋…

小米空調來了,意外的是還一起來了一個馬桶蓋

8月10日下午&#xff0c;小米旗下生態鏈企業智米召開了新品發布會&#xff0c;發布會上正式推出了智米全直流變頻空調和智米智能馬桶蓋。 智米全直流變頻空調采用了純白配色&#xff0c;外觀設計較為簡潔&#xff0c;空調底部有一個圓形的顯示屏&#xff0c;可顯示溫度、電量統…

聊一聊 CLR 中的 typedef 是怎么玩的

一&#xff1a;背景 在 CLR 源碼中&#xff0c;我們會看到很多關于 typedef 的定義&#xff0c;比如下面這樣&#xff1a;// Callback function type used by DacStreamManager to coordinate // amount of available memory between multiple streamable data // structures (…

JAVA如何正確處理Unicode字符

最近在開發輸入法程序時遇到一個小問題&#xff0c;就是刪除一個emoji時&#xff0c;不能一次刪干凈&#xff0c;需要執行兩次操作才可以。Intuitively&#xff0c;這肯定是java操作unicode字符的問題&#xff0c;于是找了JAVA官方文檔參考一下&#xff0c;解決了這個問題&…

透過面試題,洞察Hbase 核心知識點

LSM 算法 HFile 索引 &#xff0c;二級索引 hbase的問題 1.hbase怎么預分區&#xff1f; 2.hbase怎么給web前臺提供接口來訪問&#xff1f; 3.htable API有沒有線程安全問題&#xff0c;在程序中是單例還是多例&#xff1f; 4.我們的hbase大概在公司業務中&#xff08;主要…

Android之解決android9.0通過Inten方式卸載APP沒反應

1 問題 通過Intent卸載APP在安卓9.0手機上沒反應&#xff0c;也沒報錯&#xff0c;卸載相關APP跳轉到卸載頁面代碼 fun unInstallApp(packageName: String) {val uri: Uri Uri.fromParts("package", packageName, null)val intent Intent(Intent.ACTION_DELETE, u…

《看聊天記錄都學不會Python到游戲實戰?太菜了吧》(4)小白不知道這個知識點將會錯漏百出

本系列文章將會以通俗易懂的對話方式進行教學&#xff0c;對話中將涵蓋了新手在學習中的一般問題。此系列將會持續更新&#xff0c;包括別的語言以及實戰都將使用對話的方式進行教學&#xff0c;基礎編程語言教學適用于零基礎小白&#xff0c;之后實戰課程也將會逐步更新。 若…

【Pix4d精品教程】打開Pix4DMapper時提示Pix4DMapper.exe已停止工作的完全解決辦法

本文為作者在使用軟件時,打開Pix4DMapper時提示Pix4DMapper.exe已停止工作的完全解決辦法,親測可用! 目錄 一、問題錯誤提示 二、問題分析及解決方法 一、問題錯誤提示 打開Pix4DMapper時,提示Pix4DMapper.exe已停止工作,錯誤提示如下: 展開問題詳細信息: