jq操作radio、checkbox

来源:互联网 发布:爱淘宝 编辑:程序博客网 时间:2024/06/11 07:00
<div class="radio-box">  <label for="radioA">    <input type="radio" id="radioA" name="radioName" value="男">男  </label>  <label for="radioB">    <input type="radio" id="radioB" name="radioName" value="女">女  </label></div><div class="checkbox-box">  <label for="checkboxA">    <input type="checkbox" name="checkboxName" id="checkboxA" value="A">A  </label>  <label for="checkboxB">    <input type="checkbox" name="checkboxName" id="checkboxB" value="B">B  </label>  <label for="checkboxC">    <input type="checkbox" name="checkboxName" id="checkboxC" value="C">C  </label></div>

radio操作

//radio单选组的第一个元素为当前选中值$('input[name="radioName"]').get(0).checked = true;//为radio添加事件,当选择其中一项时触发$('input:radio[name="radioName"]').change(function () {  //jquery获取radio单选按钮的值  let radioValue = $('input[name="radioName"]:checked').val();  if (radioValue === null) {    $('.showRadioValue').html("什么也没选中!");  } else {    $('.showRadioValue').html('选中 ' + radioValue);  }});

checkbox操作

//不打勾$("#checkboxA").attr("checked", '');//打勾$("#checkboxB").attr("checked", true);$('input:checkbox').change(function () {  //判断第二个是否选中  console.log($("input:checkbox").get(1).checked);  $('.showCheckbox').html('已选择');  //遍历checkbox  $("input[name='checkboxName']").each(function () {    //判断是否选中    true  false    if ($(this).is(':checked')) {      let checkboxValue = $(this).val();      $('.showCheckbox').append(' ' + checkboxValue);    }  });  //判断指定id是否已经打勾  if ($("#checkboxC").get(0).checked) {    $('.show').html('选择C');  } else {    $('.show').html('未选择C');  }});

原创粉丝点击