Question

<input type="checkbox" runat="server" name="Seasonal" value="Seasonal" id="isASeasonal" onclick=" if ($(this).is(':checked')) { console.log('Worky'); $('#ShowIfChecked').show(); $('#HideIfChecked').hide(); } else { $('#HideIfChecked').show(); console.log("No Worky"); }" />

我一直试图用jQuery做到这一点，但是它还没有正常运行，我还对如何压缩这段代码做了大量的研究。我试图用三元运算符压缩语句。如果你能帮我找到一个可能很棒的解决方案！谢谢（三元解决方案会很棒）

Answer 1

您的代码存在的问题是，由于代码中的console.log("X")调用会弄乱input元素的属性，因此HTML中的引号不匹配。如果您检查控制台，您很可能会看到与此相关的一些错误。

由于这个原因，在许多其他人中，使用内联脚本（或CSS样式）被认为是不好的做法。其他问题是分离问题并使代码更难以阅读编辑。使用不引人注目的Javascript附加事件处理程序是远更好的做法，如下所示：

$('.seasonal-checkbox').change(function() {
  $('#ShowIfChecked').toggle(this.checked);
  $('#HideIfChecked').toggle(!this.checked);
});

#ShowIfChecked {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" runat="server" name="Seasonal" value="Seasonal" id="isASeasonal" class="seasonal-checkbox" />

<div id="ShowIfChecked">Checked!</div>
<div id="HideIfChecked">Not Checked!</div>

请注意change事件在click上的使用情况，因此对于使用键盘导航网络的用户，仍会触发该事件。另请注意简化逻辑，使用toggle()隐藏和显示每个方法的单个调用中的相关内容，从而消除对if语句的需要 - 并通过代理也使用三元表达式。

Answer 2

您可以将onclick更改为某个功能，因为至少对我来说，更容易看到真正发生的事情。

所以改变

 <input type="checkbox" runat="server" name="Seasonal" value="Seasonal" id="isASeasonal" 
       onclick=" if ($(this).is(':checked')) { console.log('Worky'); $('#ShowIfChecked').show(); $('#HideIfChecked').hide(); } 
       else { $('#HideIfChecked').show(); console.log("No Worky"); }" />

到

<input type="checkbox" runat="server" 
    name="Seasonal" value="Seasonal" id="isASeasonal" onclick="myFuncton(this)" />

在您的观点中：

<script>
    myFunction(myCheckBox)
    {
        if(myCheckBox.Checked)
        {
           console.log('Worky'); 
           $('#ShowIfChecked').show(); 
           $('#HideIfChecked').hide(); 
        } 
        else 
        { 
           $('#HideIfChecked').show(); console.log("No Worky");
        }  
    }
</script>

现在要获得所需的表达式/ Ternary解决方案，您可以将此脚本更改为：

<script>
    myFunction(myCheckBox)
    {
       myCheckBox.Checked ? (console.log('Worky'), $('#ShowIfChecked').show(), 
           $('#HideIfChecked').hide()); :  ($('#HideIfChecked').show(), console.log("No Worky"));
    }
</script>

You can find more Info about Ternary Solutions here

Answer 3

我们不写这样的代码。它在每次代码审核时都失败了。

这样做：

$（'＃isASeasonal'）。click（function（）{...}）;

https://api.jquery.com/click/

Answer 4

Seasonal Address:&nbsp <input type="checkbox" runat="server"  clientidmode="Static" name="Seasonal" value="Seasonal" id="isASeasonal"/>

$('#ShowIfChecked').hide(); //Hid What needs to be shown if checked.
$("#isASeasonal").click(function () { //Used Click event on checkBox
($("#isASeasonal").is(':checked')) ? (console.log('worky'), $('#ShowIfChecked').show(), $('#HideIfChecked').hide()) : (console.log('no worky'), $('#HideIfChecked').show(), $('#ShowIfChecked').hide());

解决了我的问题是在ASP.net中我需要将clientidmode =“static”添加到我试图隐藏的div中。节目。我仍然不明白原因，我现在正在寻找它，但这对我有用，但在上面你可以看到大多数最终产品与三元运算符！耶。

选中时创建一个复选框，它应显示某些输入字段＆amp;隐藏模态中的其他输入字段

4 个答案: