利用原生js和jQuery實現單選框的勾選和取消操作

阿新 • • 發佈：2019-01-24

根據以下的Demo，大概就可以看的明白
Demo:

<html>
<head>
<script src='jquery-1.9.1.min.js'></script>
<script>
    window.onload = function(){
        var dom_a = document.getElementById('a1');
        var dom_b = document.getElementById("b1");
        //alert("A="+dom_a.value+" || B="+dom_b.value); 

    }

    //以下開始操作radio的取消和勾選
    //原生js操作
    function fn1(){
        var dom_a = document.getElementById('a1');
        var dom_b = document.getElementById("b1");
        //勾選
        dom_a.checked = true;
        //dom_a.checked = 'false';
        //dom_a.checked = 123;
        //取消勾選
        dom_b.checked = '' 
;
        //dom_b.checked = false;//取消勾選
        //dom_b.checked = null;//取消勾選
        //dom_b.checked = undefined;//取消勾選

    }
    //利用jQuery操作
    function fn2(){
        var jQ_a = $('#a2');
        var jQ_b = $("#b2");
        //勾選
        jQ_a.prop('checked','abc');
        //jQ_a.prop('checked','123');
        //jQ_a.prop('checked','true'); 

        //jQ_a.prop('checked',true);
        //jQ_a.prop('checked',123);//數字可以
        //jQ_a.prop('checked',-1);
        //jQ_a.prop('checked',abc);//會報錯,abc未定義  {所以預猜測checked只要有已定義的值即可實現選中(undefined代表未定義)}
        //取消勾選
        jQ_b.prop('checked','');
        //jQ_b.prop('checked',false);
        //jQ_b.prop('checked',null);
        //jQ_b.prop('checked',undefined);//沒有任何效果,不會報錯
    }

</script>
<style>
    .own{
        border:solid 2px red;
        padding:20px 5px 20px 40px;
        width:300px;
        margin:80 0 0 500;
    }
</style>
<head>
<body>
<!--
    通過實驗得知：
        初始化讓單選框選中有4種方法可以實現：
        1、checked
        2、checked='checked'(建議用此方法，此方法對瀏覽器可以有很好的相容性)
        3、checked='true'
        4、checked=true
        小提示：通過給checked屬性複製,只要checked存在,
            賦予任何值都可以初始化選中(eg:checked='aaa' 或 checked='false')
            不賦值都可以實現初始化選中
        測試成功案例：
            [checked],[checked='checked'],[checked='true'],[checked=true],[checked='aaa'],[checked='false'],
            [checked='undefined'],[checked=false],[checked=null],[checked=undefined],[checked=''],[checked='-1']

        當有多個被選中時，最後選中的單選框為最後一個
-->

<div class='own'>
<label>A1</label><input id='a1' type='radio' value='1' name='test1' checked />
<label>B1</label><input id='b1' type='radio' value='2' name='test1' checked='checked'/>
<label>C1</label><input id='c1' type='radio' value='3' name='test1' checked='true' />
<label>D1</label><input id='d1' type='radio' value='4' name='test1' checked=true />
<button onclick='fn1()'>測試點選一下</button>
</div>

<div class='own'>
<label>A2</label><input id='a2' type='radio' value='1' name='test2' />
<label>B2</label><input id='b2' type='radio' value='2' name='test2' checked/>
<label>C2</label><input id='c2' type='radio' value='3' name='test2' />
<label>D2</label><input id='d2' type='radio' value='4' name='test2' />
<button onclick='fn2()'>測試點選一下</button>
</div>

</body>
</html>

以上是本人自己測試的結果，用興趣的可以copy實驗一下。

利用原生js和jQuery實現單選框的勾選和取消操作

根據以下的Demo，大概就可以看的明白 Demo: <html> <head> <script src='jquery-1.9.1.min.js'></sc

利用html和Jquery實現照片牆（點選之後放大，再點選縮小）

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jque

原生js、jQuery實現選項卡功能

lap span size open absolute index http jquery html 在大家在網上平常瀏覽網頁的時候，想必各位都會看到選項卡功能，在這裏給大家詳解一下用原生js、jQuery如何來寫一些基本的選項卡話不多說，先給各位看一下功能圖：

純CSS、原生JS、jQuery實現下拉選單功能

一、純CSS實現實現下拉選單需要用display，即改變display的block或none值。先構建基本的HTML框架， <div id="nav"> <ul> <li><a href="#">

解決原生js或jQuery 實現父視窗的問題，如window.parent.document.getElementById()

做WEB前端開發的過程中，經常會有這樣的需求，使用者點選【編輯】按鈕，彈出一個對話方塊，在裡邊修改相應的值，然後把修改後的值顯示在原頁面，最後點選儲存。用window.parent.document.getElementById().setAttribute("va

用JAVA和Jquery實現掃碼登入的原理和程式碼

貼上前端程式碼,供參考 <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript" src="js/jq

jqgrid獲取樹形選單所有的複選框勾選資料

jqgrid獲取樹形選單所有的複選框勾選資料 jqgrid樹形資料列表，程式碼如下： function initTable() { $("#tb1").jqGrid(“clearGridData”); $("#tb1").jqGrid({ url:"/sys

bootstraptable前端設定樹形選單複選框勾選狀態

<body class="skin-blue sidebar-mini" style="background: none"> <section class="content" id="app"> <div class="row"> <

dataGridView空白列,預設選中行的背景色,dataGridView中加入複選框勾選狀態的更改

如題： 1,dataGridView空白列就是指dataGridView每一行的頭上都會有一個行頭，不能繫結資料也不能進行什麼操作。不知道大家有沒有對此頭疼過，我以前都是忽略不管，到後來才發現dataGridView屬性面板中有一個設定行頭是否顯示的屬性Ro

TreeView的複選框勾選

如果勾選所有子節點，父節點也會勾選；如果某子節點取消勾選，則所有父節點也取消勾選”，下面的程式碼能全做到： //設定標誌，防止死迴圈 bool check = false; //節點勾選後事件，如果更改某一節點狀態會自動觸發，所以在後面的方法中無需遞迴 private

利用原生js實現自定義滾動條（可點選到達，拖動到達）

1.HTML檔案 div1是滾動條，div2是滾動小球，div3是文字區域容器，div4是文字區域。 <div id="div"> <div id="div1"> <div id="div2"> </div> </div&

分別使用js和JQuery實現全選和全不選

1.1html <table border="1" width="500" height="50" align="center"> <thead> <tr> <td colspan="4"><input type="butt

jquery和js分別實現獲取checkbox的值+jquery實現複選框全選

//jquery實現全選 $(function(){ $("#checkAll").click(function(){ $(".checkOne").attr("checked",this.checked) }) }) //批量刪除jquery實現提示 function p_d

使用js和jquery實現點選圖片上傳及預覽

//上傳頭像 $(".avator-btn-fake").click(function(){ $("#upload").click(); }); $("#upload").change(function(){ var

原生js和jQuery實現頁面跳轉的學習

js的實現 1.window.location.href方式 <script language="javascript" type="text/javascript">

jQuery 實現單選按鈕（radio）勾選和取消，使用prop()代替attr() 踩坑部落格

歡迎來到Altaba的部落格 2017年11月1日很多時候，我們需要原因js指令碼去操控一排單選按鈕，獲取後臺資料顯示當前項的某個設定值，通過單選框顯示，進而還能夠通過修改勾選單選按鈕去修改這個項的值，由於整個專案前端是通過jQuery實現，果斷想到使用attr（）方法

js和jquery實現回到頂層

left ret poi add 寬度 fadein soft 距離 jquery實現 js <!DOCTYPE html> <html> <head> <title>返回頂部</title> <styl

如何用CSS和jQuery實現一個側滑導航菜單

his 事件監聽也有 font ajax size add tar 出現為了建立導航菜單，讓我們先看看html結構：<!DOCTYPE html><html lang="en"><head> <meta charset="U

25.用js和jquery實現下拉列表的左右選擇

select2 hit color nts -type utf ctype block 標簽 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

jQuery js實現checkbox復選框全選、全不選、反選 PHP

實現 com check set false jquer display value round <!doctype html> <html lang="en"> <head> <meta charset="

利用原生js和jQuery實現單選框的勾選和取消操作

相關推薦