DozoBang
2018-12-11 07:31
采纳率: 56.3%
浏览 1.9k

判断!!!如何在JS里面通过value值判断当前选择的按钮,并打印出来

1.当点击“长期有效”时,打印出“长期有效”。
2.当点击自定义后,显示时间弹出框并选择时间后,打印出当前日期。(这边要判断是否选择了日期,没有选择日期的话要alert选择时间)

HTML代码

<div class="col-sm-10">
<input type="radio" name="inlineRadioOptions1" id="inlineRadio1" value="option1" class="dateChoose" value="
0"> 
<label for="inlineRadio1">长期有效</label>

<input type="radio" name="inlineRadioOptions1" id="inlineRadio2" value="option2" class="dateChoose others" value=
"1"> 
<label for="inlineRadio2">自定义</label>

<input type="date" name="inlineDateChoose" class="form-control dateJump" id="datetimeInput" value="" placeholder="" style="width: 165px">
<button id="btn" class="btn">点我</button>
</div>

显示/隐藏效果代码

<style>
    .others ~ input[type='date'] {
        display:none;
    }
    .others:checked ~ input[type='date'] {
        display:inline;
    }
    #date:before {
        content:"before";
    }
    #date::before {
        content:"before";
    }
    </style>

显示/隐藏JS效果代码

$(function(){
        $(".dateChoose").click(function(){
            $(this).siblings().attr("checked",false);
            $(this).attr("checked",true);
            if($(this).attr("class").indexOf('others')>=0){
                $(this).siblings('.dateJump').show();
            }
            else{
                $(".others").siblings('.dateJump').hide();
            }
        });
    })

JS判断代码!!!!

var v1 = document.getElementById('inlineRadio1');
      var v2 = document.getElementById('inlineRadio2');
      if(v1.value == '0'){
          times = "长期有效";
          console.log(times);
          return times;
      }
      else {
          if(v2.value == '1'){
              times = $(".dateJump");
              console.log(times);
              return times;
          }
          else {
              alert("请选择截止时间");
              return times;
          }
      }
            $('.btn').click(function () {
        console.log(times.val());
    })//打印出times的值为时间或者“长期有效”

效果图

选择长期有效时
图片说明

选择自定义并选择时间

图片说明
图片说明

各位大佬,主要是判断这边的代码不知道怎么写,我是设置了他value的值,从判断value的值来判断点选了那个选项!!!最终打印出的结果times的值为时间或者“长期有效”!!!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • DozoBang 2018-12-28 08:14
    已采纳

    已解决,换了其他的方式后可以成功!

    点赞 评论
  • weixin_40857476 2018-12-11 08:10
    var v1 = document.getElementById('inlineRadio1');
    var v2 = document.getElementById('inlineRadio2');
    $('.btn').click(function () {
        var times = '请选择截止时间';
        if (v1.checked == true) {
            times = "长期有效";
        } else if (v2.checked == true) {
            times = $(".dateJump").val();
            if (!times||times == "") {
                times = '请选择截止时间';
            }
        }
        console.log(v1.checked, v2.checked, times);
        alert(times)
    }) //打印出times的值为时间或者“长期有效”
    
    点赞 评论
  • weixin_42352689 2018-12-12 01:14

    document.getelementbyid("inlineRadio1").innerText应该能读取它的文本值

    点赞 评论

相关推荐 更多相似问题