猿问

判断!!!如何在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的值为时间或者“长期有效”

效果图

选择长期有效时

选择自定义并选择时间

https://img1.mukewang.com/5cd7d5d00001bb5505810099.jpg

https://img3.mukewang.com/5cd7d5d10001490705640101.jpg

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


慕斯王
浏览 746回答 3
3回答

湖上湖

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

阿晨1998

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

尚方宝剑之说

document.getelementbyid("inlineRadio1").innerText应该能读取它的文本值
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答