search

zhangxinxu / quiz

小测答题收集区
536 stars 43 forks source link

DOM基础测试38 #46

Open zhangxinxu opened 5 years ago

zhangxinxu commented 5 years ago

本期小测关于单选框元素以及验证相关二三事，非常基础。

大家提交回答的时候，注意缩进距离，起始位置从左边缘开始；另外，github自带代码高亮，所以请使用下面示意的格式（缩进和代码高亮1积分）。

```js
// 你的JS代码写在这里
 ```

**心怀瑞雪，自己作答，不要参考别人回答**

HTML代码

<input type="button" id="removeDisabled" value="全部都可用">
<input type="radio" value="1" name="bookName" required>沐神记
<input type="radio" value="2" name="bookName" disabled>放开那条龙
<input type="radio" value="3" name="bookName">重生之扫地僧
<fieldset disabled>
    <input type="radio" value="ba1" name="bookAuthor">宅猪
    <input type="radio" value="ba2" name="bookAuthor" checked>西红柿
    <input type="radio" value="ba3" name="bookAuthor">莫默
</filedset>

其他 因为本周六正常上班，因此本期小测答疑挪到本周日10月13日晚上19:00。直播地址：https://live.bilibili.com/21193211

每位答题者会有至少2积分参与分。

首位答题者将会获得100%被翻牌的技能。

Seasonley commented 5 years ago 
//1
const reqEles=document.querySelectorAll('input[type="radio"]:required');
//2
const disEles=document.querySelectorAll('input[type="radio"]:disabled');
//3
const chkEles=document.querySelectorAll('input[type="radio"]:checked');
//4
const btn = document.getElementById('removeDisabled');
//过滤只有radio的filedset
const fieldEles = [...document.querySelectorAll('fieldset:disabled')].filter(v =>
    !v.querySelector(':scope input:not([type=radio])')
    &&v.querySelector(':scope input[type=radio]')
);
btn.addEventListener('click',  ()=>{
    [...disEles,...fieldEles].forEach(v => v.disabled = false);
});
//5
const invEles=document.querySelectorAll('input[type="radio"]:invalid');
[...invEles].forEach(v => v.style.outline = '3px dashed red');
XboxYan commented 5 years ago

1

const radiolist1 = document.querySelectorAll('[type=radio]:required');

2

const radiolist2 = document.querySelectorAll('[type=radio]:disabled');

3

const radiolist3 = document.querySelectorAll('[type=radio]:checked');

4

const btn = document.querySelector('#removeDisabled');
btn.addEventListener('click',()=>{
    [...radiolist2].forEach(el=>{
      const fieldset = el.closest('fieldset:disabled');
      if (fieldset) {
        fieldset.disabled = false;
      }
      if (el.disabled) {
        el.disabled = false;
      }
    });
})

5

[type=radio]:invalid{
  outline: 3px dashed red;
}
asyncguo commented 5 years ago

1 

document.querySelectorAll('input[type="radio"]:required')

2 

document.querySelectorAll('input[type="radio"]:disabled')

3 

document.querySelectorAll('input[type="radio"]:checked')

4 

let button = document.getElementById('removeDisabled')

button.addEventListener('click', () => {
  document.querySelectorAll('input[type="radio"]').forEach(el => {
    while (el.parentNode.nodeName !== 'BODY') {
      if (el.parentNode.disabled) {
        el.parentNode.disabled = false
      }
      el = el.parentNode
    }

    el.disabled = false
  })
})

5 

document.querySelectorAll('input[type="radio"]:invalid').forEach(el => {
  el.style = 'outline: 3px dashed red'
})
hangfengnice commented 5 years ago 
1.
let radioRequired = document.querySelectorAll('[type="radio"]:required')

2.
let radioDisabled = document.querySelectorAll('[type="radio"]:disabled')

3.
let radioChecked = document.querySelectorAll('[type="radio"]:checked')

4.
document.getElementById('removeDisabled').onclick = function () {
    [...radioDisabled].map(item => item.removeAttribute('disabled'));
    document.querySelector('fieldset').removeAttribute('disabled');
};

5.
[...document.querySelectorAll('[type="radio"]:invalid')]
.map(item => item.style.outline = '3px dashed red');
livetune commented 5 years ago 
  // 第一题
  const requiredRadio = document.querySelectorAll('input[type="radio"]:required')
  console.log(requiredRadio)

  // 第二题
  const disabledRadio = document.querySelectorAll('input[type="radio"]:disabled')
  console.log(disabledRadio)

  // 第三题
  const checkRadio = document.querySelectorAll('input[type="radio"]:checked')
  console.log(checkRadio)

  // 第四题
  const removeDisabled = document.getElementById('removeDisabled')
  console.log(removeDisabled)
  removeDisabled.addEventListener('click', () => {
    disabledRadio.forEach(item => {
      if (item.disabled) {
        item.disabled = false
      }
    })
    document.querySelectorAll('fieldset:disabled').forEach(item => {
      if (item.querySelector('input[type="radio"]')) {
        item.disabled = false
      }
    })

  })
  // 第五题
  const inValidStyle = document.createElement('style')
  inValidStyle.innerHTML = `
      input[type="radio"]:invalid{
        outline:3px dashed red
  }`
  document.head.append(inValidStyle)
wingmeng commented 5 years ago

第 1 题：

document.querySelectorAll('[type=radio]:required');

第 2 题：

// 处于禁用状态的 fieldset 下的 radio 也包含在内
document.querySelectorAll('[type=radio]:disabled');

第 3 题：

document.querySelectorAll('[type=radio]:checked');

第 4 题：

const activateBtn = document.getElementById('removeDisabled');

activateBtn.addEventListener('click', () => {
  const disabledRadios = document.querySelectorAll('[type=radio]:disabled');

  [...disabledRadios].map(radio => {
    const fieldset = radio.closest('fieldset');  // 这里未考虑多层 fieldset 嵌套的情况

    radio.disabled = false;
    fieldset && (fieldset.disabled = false);
  });
});

第 5 题：

纯 CSS 方案即可

[type=radio]:invalid {
  outline: 3px dashed red;
}
les-lee commented 5 years ago 
    // 1
    let requireRadios = document.querySelectorAll('input[type="radio"]:required')
    console.log(requireRadios)
    // 2
    let disabledRadios = document.querySelectorAll('input[type="radio"]:disabled')
    console.log(disabledRadios)
    // 3
    let checkedRadios = document.querySelectorAll('input[type="radio"]:checked')
    console.log(checkedRadios)
    // 4
    function enabledParent(item) {
      if (!item.parentElement) return
      if (item.parentElement.disabled) {
        item.parentElement.disabled = false;
        return
      } else {
        enabledParent(item.parentElement)
      }
    }
    document.querySelector('#removeDisabled').onclick = e => {
      disabledRadios.forEach(item => {
        if (item.disabled) {
          item.disabled = false
        } else {
          enabledParent(item)
        }
      })
      // 5
      let invalidRadios = document.querySelectorAll('input[type="radio"]:invalid')
      console.log(invalidRadios)
      invalidRadios.forEach(item => item.style.outline = '3px dotted red')
    }
lifelikejuly commented 5 years ago
juzhiqiang commented 5 years ago

验证demo,点我点我点我 html部分

<input type="button" id="removeDisabled" value="全部都可用">
<input type="radio" value="1" name="bookName" required>沐神记
<input type="radio" value="2" name="bookName" disabled>放开那条龙
<input type="radio" value="3" name="bookName">重生之扫地僧
<fieldset disabled>
    <input type="radio" value="ba1" name="bookAuthor">宅猪
    <input type="radio" value="ba2" name="bookAuthor" checked>西红柿
    <input type="radio" value="ba3" name="bookAuthor">莫默
</filedset>

js部分

//必选单选框【第一题】
let requiredsEl = document.querySelectorAll('input[required]');
console.log('必选元素-----', requiredsEl);

//禁用单选框【第二题】
let disabledEl = document.querySelectorAll('input[disabled],fieldset[disabled] input');
console.warn('禁用-----', disabledEl);

//选中单选框【第一题】
let checkedEl = document.querySelectorAll('input[checked]');
console.log('选中-----', checkedEl);

//解除所有禁用【第四题】
let removeBtn = document.getElementById('removeDisabled');

removeBtn.onclick = function () {

    disabledEl.forEach(function (el) {
        if (el.disabled) {
            el.removeAttribute('disabled');
        } else if (el.parentElement.disabled) {
            el.parentElement.removeAttribute('disabled');
        }
    })

}

//验证必填不合法高亮【第五题】
let radioEl = document.querySelectorAll('input[type=radio]');

radioEl.forEach(function (el) {

    el.addEventListener('input', function (e) {

        radioEl.forEach(function (el) {
            el.style.outline = el.required && !el.checked ? '3px dashed red' : 'none';
        });

    })

})
fzpijl commented 5 years ago 
 1.
var requiredRadio = document.querySelectorAll('input[type=radio][required]')
2.
var disabledRadio = document.querySelectorAll('input[type=radio][disabled]')
3.
var checkedRadio = document.querySelectorAll('input[type=radio][checked]')
 4.
var removeBtn = document.querySelector('#removeDisabled')
removeBtn.addEventListener('click', function(){
    disabledRadio.forEach(function(radio){
        radio.removeAttribute('disabled')
    })
})
 5.
var radios = document.querySelectorAll('input[type=radio]');
radios.forEach(function(radio){
    if(!radio.validity.valid){
        radio.style.outline = 'red dashed 3px'
    }
})
347235420 commented 5 years ago 
//第一题
    const requirDom=document.querySelectorAll('input[type="radio"]:required');

//第二题
    const disabledDom=document.querySelectorAll('input[type="radio"]:disabled');

//第三题
    const checkDom=document.querySelectorAll('input[type="radio"]:checked');

//第四题
    const removeDisabledDom=document.getElementById('removeDisabled');
    removeDisabledDom.addEventListener('click', ()=>{
        disabledDom.forEach(el=>{
            el.disabled = false
        });
   })

//第五题
    const invalidDom=document.querySelectorAll('input[type="radio"]:invalid');
    [...invalidDom].forEach(v => v.style.outline = '3px dashed red');
guqianfeng commented 5 years ago 
        {
            const $ = (selector, parent = document) => parent.querySelectorAll(selector);

            let aRequiredInput = $("input[type=radio]:required");
            let aDisabledInput = $("input[type=radio]:disabled");
            let aCheckedInput = $("input[type=radio]:checked");

            let btn = $("#removeDisabled")[0];
            btn.addEventListener("click", function () {
                aDisabledInput.forEach(item => {
                    const oFieldset = item.closest("fieldset:disabled");
                    oFieldset ? oFieldset.disabled = false : item.disabled = false;
                })
            });

            $("input[type=radio]:invalid").forEach(item => item.style.outline = '3px dashed red');
        }
rayj1993 commented 5 years ago 
> 第一题
let requiredArr = document.querySelectorAll('input[type="radio"]:required');

> 第二题
let disabledArr = document.querySelectorAll('input[type="radio"]:disabled');

> 第三题
let checkedArr = document.querySelectorAll('input[type="radio"]:checked');

> 第四题
document.getElementById('removeDisabled').addEventListener('click', () => {
    disabledArr.forEach(element => {
        if (element.getAttribute('disabled') === null) {
           element.closest('fieldset').removeAttribute('disabled');
        } else {
            element.removeAttribute('disabled');
        };
    })
});

> 第五题
let invalidArr = document.querySelectorAll('input[type="radio"]:invalid');
invalidArr.forEach(element => {
element.style.outline = '3px dashed red';
});
JaimeCheng commented 5 years ago 
// 1
const res1 = document.querySelectorAll('input[type="radio"]:required')
// 2
const res2 = document.querySelectorAll('input[type="radio"]:disabled')
// 3 
const res3 = document.querySelectorAll('input[type="radio"]:checked')
// 4
const btn = document.getElementById('removeDisabled')
btn.onclick = function () {
  [...res2].forEach(el => {
    if (!el.getAttribute('disabled')) {
      document.querySelector('fieldset').removeAttribute('disabled')
    }
    el.removeAttribute('disabled')
  })
}
/* 5 css */ 
input[type='radio']:invalid {
  outline: 3px dashed red;
}
zy017 commented 5 years ago 
// 1.
var radioRquireDom = document.querySelectorAll('input[type=radio]:required')
// 2.
var radioDisabledDom = document.querySelectorAll('input[type=radio]:disabled')
// 3.
var radioCheckeddDom = document.querySelectorAll('input[type=radio]:checked')
// 4.
var btn = document.querySelector('#removeDisabled')
btn.addEventListener('click', () => {
    document.querySelectorAll("input[type=radio]").forEach(item => {
        if (item.disabled) {
            item.disabled = false
        }
        if (item.closest('fieldset')) {
            item.closest('fieldset').disabled = false
        }
    })
})
// 5. 
var style = document.querySelector('style')
if (!style) {
    style = document.createElement('style')
    document.head.appendChild(style)
}
style.insertAdjacentHTML('beforeend',`[type=radio]:invalid {outline: 3px dashed red;}`)
zengqingxiao commented 5 years ago

第一题

var requiredInputAll = document.querySelectorAll("input[type='radio'][required]")

第二题

    var disabledInputAll = []
    var disabledInputPart_1 = document.querySelectorAll("input[disabled]")
    var disabledInputAll = [...disabledInputPart_1]
    var disabledFieldsetInput = document.querySelectorAll("fieldset[disabled]")
    // console.log([].slice.call(disabledFieldsetInput)[0])
    Array.from(disabledFieldsetInput).forEach(item => {
      Array.from(item.querySelectorAll("input[type='radio']")).forEach(item => {
        if (!disabledInputAll.includes(item)) {
          disabledInputAll.push(item)
        }
      })
    })

第三题

 var checkedInputAll = document.querySelectorAll('input[checked]')

第四题

    var removeDisabled = document.getElementById('removeDisabled')
    disabledInputPart_1.forEach(item => {
      item.removeAttribute('disabled')
    })
    disabledFieldsetInput.forEach(item => {
      item.removeAttribute('disabled')
    })

第五题

    [type=radio]:invalid {
      outline: 3px dashed red;
    }
WGHwebitem commented 5 years ago 
//第一题
var all_rd=document.querySelectorAll('input[type=radio]:required');
console.log(all_rd);
//第二题
var all_dd=document.querySelectorAll('input[type=radio]:disabled');
//第三题
var all_ck=document.querySelectorAll('input[type=radio]:checked');
//第四题
var all_id=document.getElementById('removeDisabled');
var all_ipt=document.querySelectorAll('input[type=radio]');
all_id.addEventListener('click',function(){
document.querySelector('fieldset').removeAttribute('disabled');
all_ipt.forEach(function(ele){
    ele.removeAttribute('disabled');
    })

})
//第五题
var invalid=document.querySelectorAll('input[type=radio]:invalid');
invalid.forEach(function(ele){
    ele.style.outline='3px dashed red';
})
theDrunkFish commented 5 years ago

题目1

var requiredRadios = document.querySelectorAll('input[type=radio]:required');

题目2

var disabledRadios = document.querySelectorAll('input[type=radio]:disabled');

题目3

var checkedRadios = document.querySelectorAll('input[type=radio]:checked');

题目4

var removeDisabledBtn = document.getElementById('removeDisabled');
removeDisabledBtn.onclick = function(){
   [].forEach.call(disabledRadios, function(radio){
       var closest;
       if(closest = radio.closest('fieldset[disabled]')){
           closest.disabled = false;
       }else{
            radio.disabled = false;
       }
    })
}

题目5 不会

liyongleihf2006 commented 5 years ago

1

document.querySelectorAll("[type=radio]:required")

2

var disabledRadio = document.querySelectorAll("[type=radio]:disabled")

3

document.querySelectorAll("[type=radio]:checked")

4

document.querySelector("#removeDisabled").addEventListener("click",function(){
            disabledRadio.forEach(radio=>(radio.disabled=false,radio.closest('fieldset')&&(radio.closest('fieldset').disabled=false)));
        })

5

[type=radio]:invalid {
      outline: 3px dashed red;
}
sghweb commented 5 years ago 
// 第一题
let inputRequired = document.querySelectorAll("input[type='radio']:required")
// 第二题
let inputDisabled = document.querySelectorAll("input[type='radio']:disabled")
// 第三题
let inputChecked = document.querySelectorAll("input[type='radio']:checked")
// 第四题
let removeDisabled = document.getElementById("removeDisabled")
removeDisabled.addEventListener("click", function() {
  inputDisabled.forEach((item) => {
    item.removeAttribute("disabled")
    console.log(item.parentNode.getAttribute("disabled") || typeof(item.parentNode.getAttribute("disabled")) == "string")
    if (item.parentNode.getAttribute("disabled") || typeof(item.parentNode.getAttribute("disabled")) == "string") {
      item.parentNode.removeAttribute("disabled")
    }
  })
})
// 第五题
inputRequired = document.querySelectorAll("input[type='radio']:required")
inputRequired.forEach((item) => {
  if (!item.getAttribute("checked") && typeof(item.getAttribute("checked")) != "string") {
     item.style.outline="3px dashed red"
  }
})
xxf1996 commented 5 years ago 
let inputs = Array.from(document.querySelectorAll('input[type="radio"]'))
let field = document.querySelector('fieldset')
let required = inputs.filter(item => item.required) // 第一题
let disabled = inputs.filter(item => item.disabled) // 第二题
let checked = inputs.filter(item => item.checked) // 第三题
let removeBtn = document.getElementById('removeDisabled') // 第四题(1)
removeBtn.addEventListener('click', () => {
  disabled.forEach(item => {
    item.disabled = false
  })
  field.disabled = false // 第四题(2)
  inputs.forEach(item => {
    if (!item.checkValidity()) {
      item.style.outline = '3px dashed red'
    }
  }) // 第五题
})
NeilChen4698 commented 5 years ago

1.

document.querySelectorAll('input[type=radio][required]');

2.

document.querySelectorAll('input[type=radio]:disabled');

3.

document.querySelectorAll('input[type=radio]:checked');

4.

function getDisableParentFiledset(el) {
    var result = [];
    while (true) {
        el = el.parentElement || el.parentNode;
        if (!!el && el.nodeType === 1) {
            if (el.nodeName === 'FIELDSET' && el.disabled) {
                result.push(el);
            }
        } else {
            break;
        }
    }
    return result;
}

document.querySelector('#removeDisabled').onclick = function() {
    var fieldsetList = new Set();
    document.querySelectorAll('input[type=radio]').forEach(function(el) {
        el.disabled = false;
        getDisableParentFiledset(el).forEach(function(parent) {
            fieldsetList.add(parent);
        })
    });
    fieldsetList.forEach(function(el) {
        el.disabled = false;
        el.querySelectorAll(':scope input:not([type=radio])').forEach(function(child) {
            child.disabled = true;
        });
    });
}

5.

document.querySelectorAll('input[type=radio]:invalid').forEach(function(v) {
    v.style.outline = '3px red dotted'; 
});
CMYK99 commented 5 years ago

1.

document.querySelectorAll('input[type="radio"]:required')

2.

document.querySelectorAll('input[type="radio"]:disabled')

3.

document.querySelectorAll('input[type="radio"]:checked')

4.

document.getElementById('removeDisabled').addEventListener('click', function(){
document.querySelectorAll('input[type="radio"]:disabled, fieldset:disabled').forEach(node => {
node.disabled = false
})
})

5.

document.querySelectorAll('input:required:invalid').forEach(node => {
node.style.outline = '3px dashed'
})
Despair-lj commented 5 years ago 
// 1
var requiredElements = document.querySelectorAll(
  'input[type="radio"][required]'
);
// 2
var disabledElements = document.querySelectorAll(
  'input[type="radio"][disabled], fieldset[disabled] input[type="radio"]'
);
// 3
var checkedElements = document.querySelectorAll('input[type="radio"][checked]');
// 4
var removeDisabled = document.getElementById('removeDisabled');
removeDisabled.addEventListener('click', function(event) {
  var disabledInput = document.querySelectorAll(
    'input[type="radio"][disabled]'
  );
  var allDisabeldFieldset = document.querySelectorAll('fieldset[disabled]');
  var allDisabled = [...disabledInput];
  allDisabeldFieldset.forEach(function(element) {
    var inputs = element.querySelectorAll('input[type="radio"]');
    inputs.length && (allDisabled = allDisabled.concat(element));
  });

  allDisabled.forEach(function(element) {
    element.removeAttribute('disabled');
  });
});
// 5
var invalidElements = document.querySelectorAll('input[type="radio"]:invalid');
invalidElements.forEach(function(element) {
  element.style.outline = '3px dashed red';
});
ziven27 commented 5 years ago

第一题

document.querySelectorAll('[type="radio"]:required');

第二题

document.querySelectorAll('[type="radio"]:disabled');

第三题

document.querySelectorAll('[type="radio"]:checked');

第四题

var eleDisableds = document.querySelectorAll('[type="radio"]:disabled');
document.getElementById('removeDisabled').addEventListener('click', function () {
    // 防止已经匹配过的 radio 多次执行
    var hadSetBeforeNameList = [];
    var setEleDisabled = function (ele, radioName) {
        if (ele.disabled) {
            ele.disabled = false;
            hadSetBeforeNameList.push(radioName);
        } else {
            setEleDisabled(ele.parentElement, radioName);
        }
    };
    for (var eleDisabled of eleDisableds) {
        var radioName = eleDisabled.name;
        if (hadSetBeforeNameList.indexOf(radioName) === -1) {
            setEleDisabled(eleDisabled, radioName);
        }
    }
});

第五题

[type="radio"]:invalid{
    outline: 3px dashed red;
}
silverWolf818 commented 5 years ago

这里就要说一下张老师的一篇文章如何disabled禁用所有表单input输入框元素

fieldset设置了disabled 值属性, 它的后代表单控制元素也会继承这个属性

document.querySelectorAll("input[type=radio]:disabled");
GCGligoudan commented 5 years ago 
// 第一题
const radioRequired = document.querySelectorAll('input[type="radio"]:required');
console.log(radioRequired);
// 第二题
const radioDisabled = document.querySelectorAll('input[type="radio"]:disabled');
console.log(radioDisabled);
// 第三题
const radioChecked = document.querySelectorAll('input[type="radio"]:checked');
console.log(radioChecked);
// 第四题
const button = document.getElementById('removeDisabled');
button.addEventListener('click', function(){
  [...radioDisabled].map((radio)=>{
    radio.disabled = false;
    const fieldset = radio.closest('fieldset');
    fieldset && (fieldset.disabled = false);
  });
}, false);
// 第五题
input[type=radio]:invalid {
  outline: 3px dashed red;
}
ghost commented 5 years ago

1

let e1 = document.querySelectorAll('input[type=radio][required]')

2

let a = document.querySelectorAll('input[type=radio][disabled]')
let f = document.querySelector('fieldset[disabled]')
let b = f.querySelectorAll('input')
let e2 = [...a, ...b]

3

let e3 = document.querySelectorAll('input[type=radio][checked]')

4

let e4 = document.querySelector('#removeDisabled')
e4.addEventListener('click', (event) => {
  e2.forEach((e) => {
    e.removeAttribute('disabled')
  })
  f.removeAttribute('disabled')
})

5

let e5 = document.querySelectorAll('input[type=radio]:invalid')
e5.forEach((e) => {
  e.style.outline = '3px dashed red'
})
smileyby commented 5 years ago 
// 1
const requiredRadio = document.querySelectorAll('input[type="radio"][required]');

// 2
const disableRadio = document.querySelectorAll('input[type="radio"][disabled]');

// 3
const checkedRadio = document.querySelectorAll('input[type="radio"][checked]');

// 4
const removeBtn = document.getElementById('removeDisabled');
removeBtn.addEventListener('click', function(){
  let disableRadioArr = Array.from(disableRadio);
  disableRadioArr.forEach(item => item.removeAttribute('disabled'));
});
// 5
input[type='radio']:invalid{
  outline: 3px dashed red;
}
EmmaYXY commented 5 years ago 

        // 1
    let inputElements = document.querySelectorAll('input')
    let required = Array.prototype.filter.call(inputElements, function(input){
        return input.required
    })
    // 2
    let disabled = Array.prototype.filter.call(inputElements, function(input){
        return input.disabled
    })
    // 3
    let checked = Array.prototype.filter.call(inputElements, function(input){
        return input.checked
    })
    // 4
    let removeDisabled = document.getElementById('removeDisabled')
    removeDisabled.onclick = function(){
        disabled.map(input => {
            input.disabled = false
        })
    }
frankyeyq commented 5 years ago
  1. document.querySelectorAll('input[type="radio"]:required')
  2. let disabledRadios = document.querySelectorAll('input[type="radio"]:disabled')
  3. document.querySelectorAll('input[type="radio"]:checked')
  4. document.querySelector('#removeDisabled').addEventListener('click', function() { disabledRadios.forEach(item => {item.disabled = false; }) document.querySelectorAll('fieldset').forEach(item => { if(item.querySelectorAll('input[type="radio"]').length > 0) { item.disabled = false } }) })
  5. document.querySelectorAll('input[type="radio"]:invalid').forEach(item => item.style.outline = '3px dashed red')
tao1874 commented 5 years ago 
//第 1 题
        const requiredRadios = document.querySelectorAll('input[type=radio][required]')

        //第 2 题
        const disabledRadios = document.querySelectorAll('input[type=radio][disabled')

        //第 3 题
        const checkedRadios = document.querySelectorAll('input[type=radio][checked]')

        //第 4 题
        const btn = document.getElementById('removeDisabled')
        btn.addEventListener('click', function (event) {
            const radios = document.querySelectorAll('input[type=radio]')
            radios.forEach(e => {
                if (e.disabled) e.disabled = false
            })
        })
        //第 5 题
        document.querySelectorAll('input[type=radio]:invalid').forEach(element=>element.style.outline='3px dashed red')
zhangxinxu commented 5 years ago

本期要点：

  1. :required伪类，IE10+支持。和[required]属性选择器的区别，。
  2. :disabled伪类，IE9+支持。和[disabled]属性选择器的区别，有些表单元素本身没有[disabled]属性，但是，自身是处于应用态的。这就是:disabled伪类设计的原因之一。
  3. :checked伪类，IE9+支持。和[checked]属性选择器的区别，有些单复选框虽然有[checked]属性，但是本身并不是选中态。这就是:checked伪类设计的原因之一。
  4. 可以disabled所有的表单元素，一次性，IE也是支持的。
  5. 关于验证的：:invalid伪类可以查询到验证有误的元素，IE10+支持。radio.validity.valid可以知道一个表单元素当前的验证状态。以及item.checkValidity()验证方法（true或false）。 具体可以参见：https://www.zhangxinxu.com/wordpress/?p=8895
  6. 省略3px才有可能得到满分，outline: dashed red，因为border, outline默认的线框计算值就是3px （medium）。
  7. 关于上面伪类更多更深入的知识可以参见我的新书《CSS选择器世界》，如果想要签名版可以：微店 https://weidian.com/item.html?itemID=2996663073， 或者淘宝，买签名送书 https://item.taobao.com/item.htm?spm=a1z10.1-c-s.w4004-22121509848.2.5a4b7ff7jBa4wh&id=604865008086 只会讲大家不知道的知识。